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from £99.99 


RedHat Linux is the industry 
standard operating system for 
web hosting & Internet services, 
serving some of the world's 
largest & most complex web 
sites. RedHat Linux has the 
power, reliability & value for 


money you have been looking for. 
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Linux Special 


Celeron 667 MHz, 20GB UltraDMA Disk, 
128MB SDRAM, 5GB Bandwidth p.m 
RedHat Linux OS 


Linux Professional 


Intel Pentium Ill 800MHz, 2x206B 
UltraDMA Disks, 256MB SDRAM 
15GB Bandwidth p.m 
RedHat Linux OS 


Linux Ultra I 


Dual Intel Pentium Ill 1GHz, 2x18GB 
SCSI Disks running RAID], 512MB 
SDRAM, 35GB Bandwidth p.m. 
RedHat Linux OS 


from £199.99 


Microsoft Windows is the choice 
of many small businesses & 
large corporations. Ideal for 
MSCPs, MCSEs, Visual Basic 
programmers & projects that 
require ASP SQL or Office 

components. We manage 
hundreds of Windows servers, 
giving you confidence that your 
web server is in the best hands. 


Windows Special 


Celeron 667MHz, 20GB UltraDMA Disk 
128MB SDRAM, 5GB Bandwidth p.m., 
Windows 2000 or NT4 


Windows Professional 


Intel Pentium fll 800MHz, 2x2068 
UltraDMA Disks, 256MB SDRAM 
15GB Bandwidth p.m 
Windows 2000 or NT4 


Windows Ultra II 


Dual Intel Pentium Il] 1GHz, 2x18GB 
SCSI Disks running RAID], 512MB 
SDRAM, 35GB Bandwidth p.m 
Windows 2000 or NT4 


from £99.99 


The Single Site Server is as easy 


to use as a virtual server, including 


all the features you are familiar 
with, but on a standalone 
dedicated web server that gives 
you the speed, scalability & 
redundancy that you have 
dreamed of. 


Single Site Special 
Celeron 667MHz, 20GB UltraDMA Disk, 


128MB SDRAM, 5GB Bandwidth p.m 
Linux OS with Virtual Control Panel 


Single Site Professional 


Intel Pentium Ill 800MHZ, 2x20GB 
UltraDMA Disks, 256MB SDRAM 
15GB Bandwidth p.m 
Linux OS with Virtual Control Panel 


Single Site Ultra Il 


Dual Intel Pentium Ill 1GHz, 2x18GB 
SCSI Disks running RAID], 512MB 

SDRAM, 35GB Bandwidth p.m 

Linux OS with Virtual Control Ponel 


from £99.99 


The original ‘Web-in-a-box' 
solution for thousands of 
companies. Easy to use & 
easy to manage with the 
highest dedicated support level 
available. As a Cobalt True Blue 
Diamond partner, our customers 
benefit from the lowest prices, 
advanced sales literature & 
technical expertise. 


RaQ 4 128 


10.2GB Disk 
128MB SDRAM 
5GB Bandwidth p.m. 
Cobalt Linux 0S 


RaQ 4 256 


20.4GB Disk 
256MB SDRAM 
15GB Bandwidth p.m. 
Cobalt Linux 0S 


RAID RaQ 4 256 


2x20GB Disks running RAID 
256MB SDRAM 
25GB Bandwidth p.m 
Cobalt Linux 0S 


www.dedicated-servers.co.uk 
sales@dedicated-servers.co.uk 


from £199.99 


When it comes fo server reliability 
& performance, Sun Microsystems 
is the market leader. Sun servers 
are built around the Sun Solaris 
operating system & are ideal for 
customers who need a seriously 
heavy duty UNIX system. Sun 
Servers are also ideal for hosting 
demanding web sites, e-commerce 
enabled web shops, complex 
databases or Internet portals. 


from £99.99 


Locate your servers in our state 
of the art Data Centre. Simply 
choose between space for one 
server, a half rack or full rack 
of server space. We provide 
competitive bandwidth pricing, 
free reboots and an SLA. 
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Sun Netra X1 128 


Sun Netra X1 System, 400MHz 
UltraSPARC CPU, 20GB 7200RPM 
EIDE Disk, 128MB Memory DIMMS, 

Solaris 8 Installed, 15GB Bandwidth p.m. 


EES EE 
Co-location Special 


Rack space for your minitower 
or 19" rack server, 2 IP addresses, 
5B Bandwidth p.m 


Sun Netra X1 512 


Sun Netra X1 System, 400MHz 
UltraSPARCH CPU, 20GB 7200RPM 
EIDE Disk, 512MB Memory DIMMS, 

Solaris 8 Installed, 25GB Bandwidth p.m 


Co-location Professional 


Half rack/20 Us of 19" rack server 
space, 15 100Mb Switch Ports / 
15 Power Sockets, up to 30 IP 

addresses, 40GB Bandwidth p.m 


Co-location Ultra 


Full rack/40 Us of 19" rack server 
space, 23 100Mb Switch Ports / 
23 Power Sockets, up to 60 IP 
addresses, 65GB Bandwidth p.m 


Sun Netra 


Sun Netra Tl Server, 440MHz 
UltraSPARC CPU with 2MB External 
Coche, 18GB 10000RPM UltraSCS! Disk, 
512MB Memory, Solaris 7 Installed, 
35GB Bandwidth p.m 
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PLUS PACKAGE 


only £199.99 


For a complete solution to your Web hosing requirements, consider the benefits of adding the 
Plus package to your Dedicated Server. Available across all our Dedicated Servers, the Plus package 
offers outstanding value for money and total peace of mind 


Firewall 

The Dedicated Servers Firewall product allows customers to protect their machine against unwanted 
visitors. Via a web based control panel, you have the ability to allow or deny visitors based on rules 
that you set. You can add any number of rules that you wish to your Firewall system 


Backup 

An important decision when choosing your Dedicated Server is considering how you will back up the 
data on your new machine. Even though we use the best hardware that is available for all our servers, 
disks can occasionally fail, and in some cases the data on them may be lost. We strongly recommend 
our backup solutions using StorageTek tape libraries. This service includes: configuration of server side 
backup routine, 10GB of baka tapes stored securely on site in a large fireproof safe, and free 
recovery of dota in the event of data loss 


Advanced server monitoring 

For customers who require a more advanced level of server monitoring, upgrade to our Advanced 

Server Management product. This product allows you to monitor any oe of services on your server 
including Telnel, POP3 EMail, Web Server, FIP Server, Domain Name Server, Secure Web Server, SSH, 
Ping. You may also configure any number of additional services and decide how you want to be notified 
of a service failure, either EMail or SMS. Control this account feature in your Dedicated Control Panel 


Available as standard with all our Dedicated Servers is our guranteed Service Level Agreement (SLA) 


We pride ourselves on the highest levels of customer service & quality assurance, which is highlighted 
in four benefits of our SLA 


30 Minute Reboot Guarantee 
Should your server stop responding, just visit our web based reboot request iste 
form to get your server rebooted, within 30 minutes, 24/7, 365 days a year -_4 


#e 


99% Connectivity - Money Back Guarantee 
We guarantee that our network will be available at least 99% of the time 


Prices Frozen - Forever! 
We guarantee never to put your prices up, ever, even if prices change for new customers. 


Bandwidth Guarantee 

Unlike some of our competitors, we do not oversell bandwidth. At Dedicated Servers we guarantee that 
we have 1:1 contention ratio on bandwidth. This means that we will always have nats bandwidth 
to service every single customer at their full capacity 
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Web Design 


Welcome 


Welcome to ourfirst ‘concept issue’ - in it we'll show 
you how to design an entire Website from top to 
bottom. As far as we know, this is the first time a 
design magazine has taken its readers through the full 
process, culminating in a finished Website that’s ready 
to go online. 

It's been a challenging project for us, but we've 
involved some of the UK's finest new media talent in 
the process, They include the animators at Fictitious 
Egg and Freakish Kid, video experts at Bigimpact TV, 
the game designers at Sprite Interactive, as well as 
Computer Arts’ leading Web writers. In addition, 
Easynet and webstreaming.com have joined forces 
with us to host online a finished version of the site 
you'll be building. A truly complete project 

The site you will create is a hypothetical one, 
designed for the fictitious company Arbuckle’s Ales: 
the site brief is below. In the process, you'll get a taste 
of all the key aspects of Web design. We've provided 
everything you need on the CD, and inside the 
magazine you'll find tutorials and theoretical features 
outlining all the key things you need to take into 
account when designing contemporary Websites. 


Arbuckle's Ales: the brief 


[28/0102] 


Features: the theory 


Tutorials: the practice 
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Cuber-shot 
5. 0 MEGA PIXELS 


AUTO MANUAL 


Image Quality: Sony lead the world in CCD manufacture. The 5.2 megapixel 2/3” CCD chip delivers over five million 
effective pixels (the best measure of a CCD’s true capability) for stunningly accurate picture quality. Picture quality that’s 
further enhanced by the unique noise reduction system from Sony that delivers crisp, clean images even in low light. 
Meanwhile, the Sony advanced Super Hole Accumulated Diode (HAD) system transfers more light to individual pixels, for 
brighter, more accurate reproduction. Pixels, however, don’t mean much without superior analogue to digital conversion. 
That's where our 14 bit Digital Extended Processor (DXP) comes in, delivering a dynamic processor range wide enough to 
ensure incredibly smooth, realistic contrast and colour reproduction. 


Leading Edge Design: The difference between the F707 and other digital cameras becomes apparent before you even 
take your first shot. Its lens rotates through 113°; allowing you to take shots other cameras only dream of, while the 
electronic viewfinder and LCD screen let you frame your shots any way you want to. And if you want to get closer, the 
Macro AF delivers clear images from as close as 2cm away. But wherever you point it, the 5x optical zoom Carl Zeiss 
Vario Sonnar lens (F2.0-2.4) itself is a thing of beauty, delivering superbly sharp, distortion-free images. All this in a 
magnesium die-cast body that’s every bit as robust as it is light. 


Creative Control: While the technology behind the F707 is decidedly cutting edge, getting the results you want couldn't 
be any easier. The ingenious jog dial control lets you select shutter and aperture priority. Or go to full manual mode to choose 
your own exposure and field depths. Choose from spot, centre-weighted or multi-pattern light metering to get the perfect shot 
whatever the lighting. Or select from a range of pre-set scene options and effects — all with a simple flick of your finger. 


Advanced Features: Nightframing and Nightshot bypass the infra-red filter, allowing you to literally see in the dark. And 
with the ability to shoot up to three shots in rapid succession, the unique burst mode from Sony ensures you'll never miss 
a moment of the action. But because today’s photography means more than just taking pictures, the F707 makes the 
most of Sony Memory Stick technology. With the supplied 16Mb Memory Stick you can easily transfer images from camera 
to PC to virtually any electronic media imaginable. And with a Sony Stamina battery that delivers a fantastic 2500 shots 
or 2.5 hours use per charge, the F707 does more than simply see where others can't. It goes when other cameras won't. 


rain r | . 
*16mb Memory Stick supplied. Sony and Memory Stick are registered 


Memory STICK www.sony.co.uk trademarks and Cyber-shot is a trademark of Sony Corporation. Japan. 


| Designed to see where 
other digital cameras can’t. 
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After Effects 5 be UltraDev 4 


If you haven't got Dreamweaver 4, 
you'll need the demo to complete 
our tutorials 


UltraDev is the tool for making 
Web applications and databases 


Macromedia's software for 
creating and compressing 
Web graphics 


You'll need Flash. or this demo, to 
follow our Animation tutorial on 
page 51 
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Adobe's video effects package is 
great for creating Web video 


The new version of this tool for 
creating interactive 3D content. It 
needs to be registered online 


Handy 3D tool to accompany our 
graphics tutorial on page 21 


Sonic Foundry’s main noise making 
application is great for designing 
audio for your site 
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Also from Sonic Foundry, Acid 
Xpress brings new beats to the PC 


Aworking version of the finished 
Website created in this magazine 
is included on the CD. You can run 
it from the CD interface in the 
Arbuckle’s Ales section. The 
database-enhanced sections of 
this site will not work directly from 
the CD. Copy the site to your 

hard drive, then follow the 
instructions in the database 
tutorial in the magazine to set up 
the database connection. !n order 
to view the ASP files in this site it 
should be published to a local or 
remote Web server that supports 
active server pages first. 
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Navigation and 
information design 


Organising content and planning information flow are as much a 
part of the Web building process as creating pages 


he buzzword-heavy world of Web building 
regularly throws up new terms and phrases 
for things that designers have been doing 
intuitively for ages. One of the latest, 
‘information design’, is the process of creating a 
structure for your Website — deciding in advance how 
all the media components fit together and finding 
places to put them alL. It also encompasses how your 
finished pages will represent the information you've 
got. Building navigation is integral to this process, 
especially when you're working on sites of any 
substantial size. 

Drag and drop authoring applications can help in 
information and navigation design, with tools that 
enable you to make directories, add empty HTML files 


and link documents in advance of actually building the 
pages in your site. The most essential tools when 
starting on any new Web project though, are a pencil 
and a sheet of paper. 


Planning and mapping 


Don't underestimate the planning stage of building a 
Website — in some ways, it’s the most important part 
of the process. It’s then that you'll make decisions 
about how content in your site is going to be divided 
into categories, how important each of those 
categories is and how they'll be represented. You’ll 
also start to get an idea of how your users should 
navigate through that content as the relationships > 


Web Design 


gation 


Navi: 


iseit.com —> Alertbox 


The Alertbox: 
Current Issues in Web Usability 


Bi-weekly coluran by Dr. Jakob Nielsen, principal, Nielsen Norman Group 


Current Column 


(November 11, 2001) 


Your email address: 


Privacy policy: Email addresses are never sold or given out to anybody. 
This is an announcements-only list with very low volume: one short message every two weeks. 


Jakob Nielsen has a reputation for being the only Web usability guru worth listening to — although his common sense approach can be 
hit and miss. Check out his Alertbox columns at [w] www.useit.com/alertbox/ to make up your own mind. 


between different kinds of information become clear. 
Part of that will be deciding how to organise the data 
physically on your server. 

There are several established ways of planning and 
mapping information, most of which you will have 
encountered in an informal way. Making lists of 
content is the easiest and, for many, the most intuitive 
method of making a start. Brainstorming is another 
way of organising the content you have. With this 
technique you begin with a ‘seed’ word or phrase that 
represents the theme you're working on, in our case 
the content of a Website. In ‘visual brainstorming’ you 
would write that down in the middle of a large sheet of 
paper. Then as content categories come to mind, write 
those down as well, drawing lines between those 
concepts or categories that are related to each other. 
This method not only enables you to map out what 
content categories will be needed in your site, it also 


What the I$##@IQ@IIIN! 


The ancient Web Pages That Suck site gives an entire section 
to Mystery Meat navigation, complete with links and tips on 
how to make your own systems concise and clear. Go to 

[w] www.webpagesthatsuck.com/badnavigation.html. 
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Usable Web Sear _ Seer | ee 
1423 links about web usability How | Bopilar 
Tndeses: Topics! Destinations | Authors | Sar lodex Bate 
About 
‘Thal! Eendbact 


Last update: Oetaber 3, 2001 By Keith lustone Usable Web is a 
collechon of inks about information archtecture, human factory, user 
suterface issues, and usable design specific to the World Wide Web 
Value adds: descrptons, muitple organizational schemes (by dete 
topic, destination, author, populanty), search engine queries to even more 
rerourcet 


What's New 


+ Oct3. Web ReDesian 
+ Oct3. Bunnees 2.0 Guide to 


Topics 


Methods (41 tnks) Techmques on how to amprove the usatalty ofthe 
web. 


Inspection Methods (13), Tools (24), User Tests (35). User and 
‘Task Analyns (23) 

Design Tis (86 wera advace and examples of usable designs 
Bad Design (16). Comprehensive Guidebums (12), Site 
Conventions (2), Rewews (25), User Interfaces (15), Weiting 


The Yahoo of usability, the Usable Web at [w] www.usableweb. 
com offers links empirical evidence, user testing methods and 
articles on interface design. 


prompts you to think about the relationships between 
different kinds of content and visualise how it will be 
organised on the page and behind the scenes. How 
your content breaks down not only has an effect on 
how that information appears to users, but on how it 
will be structured and stored within the site. In many 
cases, especially when you're working to a tight brief, 
you'll already know what the various sections of a site 
will be, but even then a brainstorming session can help 
you decide how it will be represented and organised. 


Establishing hierarchies 


Traditional media are linear. Television, books and 
radio all demand that you navigate in one direction. 
You can skip through bits if you want — video tape has 
made TV as flexible as books in this respect — but 
they’re structured so that you move from beginning to 
end. Websites can be linear too, but more often than 
not they offer users the option to select which 
information they want from a set of categories. 

In order to impose some control over this process, 
you can organise information hierarchically. Apart 
from the fact that your site would look pretty cluttered 
if you provided links to every single page from your 
table of contents, establishing a hierarchy enables 
your users to find the content they need more easily 
and gives you the opportunity to guide them to the 
most important areas. Although establishing 
hierarchies is part of the mapping process, it bleeds 
into the next stage, which is designing navigation. 

Hierarchies can be simple. In the example site that 
we're building in this magazine, we have a fairly simple 


If all else fails... Providing a site map that lists all the major 
sections and sub-sections within your site will enable users to 
find their way around. 


frontend.com~ 
usability infoCentre 


Visit Frontend.com 


The Digest 


‘Our selection © ue 
Py 


Latest advice, opinion ang 
research from the Frontend team 
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Examples of good (and bad) 
usability in the online environment 


Frontend at [w] http://infocentre.frontend.com/ features 
usability articles alongside opinion columns. Frontend also 
reviews commercial Websites from a usability perspective. 


two-tier information hierarchy. Each section is divided 
according to a type of content and given a navigation 
option that is consistent throughout the site. 

In turn, each section has further options that are 
internal to that page and exist outside of the main 
navigation structure. For example, clicking on a link to 
the ordering system takes you to a page that includes 
options that let you choose items from an online form 
to purchase. The online form is in itself a sort of 
navigation system — a front-end to a database. 
Because the whole thing is contained within a larger 
hierarchy, the user can hop back to any other section if 
they like, bypassing the ordering system altogether. 

Larger sites may have deeper hierarchies. The 
deeper they are, the more important it is that they 
behave consistently with the content in other parallel 
categories and categories above them. 


Where am I? 


Navigation systems are there to help users find 

the content in your site: nothing more or less. Lots of 
articles say that your links should be a certain colour 
or that using Flash for navigation is a really naughty 
thing, but the most important thing is that your system 
helps users locate the content they're looking for. It 
might be helpful to think of your site as a space in 
which the job of your navigation system is to help users 
find out where they've been, where they are and where 
they can go next. 

The ‘Where am |?’ dilemma can be easily solved by 
making sure that pages are clearly labelled with a 
category or section title. A popular way to do this is to 
display the information in a hierarchical way reflecting 
the structure of the site at the top of the page, 
‘Contents>Car Parts>Air Filters’, for example. 
Incorporating a space into your heading design to 
place a label that changes from page to page will help. 

The simplest methods shouldn't be underestimated. 
Giving your pages individual descriptive titles in the 
<head> of your document is the easiest way of letting 
your users know where they are. It also has the virtue 
of making your pages consistent with the features of 
the user’s browser and the wider Web and you should 
use those basic functions whenever you can. The 
advantage they have over other methods is that your 
user already understands how they work. 


Where dol go? 


The same advice holds true when you're trying to tell 
your user where to go. Several categories of 
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Illustrator 10 


* Free Macromedia 
Seminars 

¢ Avatar Lab 

+ Milia 2002 

* FreeHand 8: Full product 
registration 

* Hotel Pepper 

* mental ray 

More... 


Version 10 of the heavyweight illustration package is here, with 
innovative symbol tools, powerful envelopes and more. Does this 


* Fresh navigation 

© Flash dynamic menus 

* 3ds max 4 
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upgrade have it all? 
[ More software reviews } 


The Computer Arts site offers multiple navigation paths, including a main navigation strip that contains dropdown sections, a left 
aligned side bar that highlights important sections and callouts on the front page to draw attention to recent additions. 


destination have become standard through repeated 
usage, so it makes sense to stick with them. For 
example, the top page in the hierarchy is usually 
called the ‘home’ page, the section with addresses 
‘contact’, so why deviate from those labels if they 
work? If the text description of a destination needs 
further explanation, find a way to incorporate that 
unobtrusively and consistently. You can employ 
rollovers or Alt labels to describe a link in more depth, 
or put some text under the link. 

Using callouts in your home page is another way to 
provide your links with context. Although this might 
sound like a content provision job, it's more of an 
information design task. The front page of your site is 
an extension of the navigation system, a place where 
you can highlight new content, describe categories in 
more depth and ‘sell’ the information side. 

Again, familiar practices work best — like having a 
‘What's new list that tells your users about recent 
updates. You can also pick out content and summarise 
it on your front page, posting headlines and key 
imagery to draw the user in. If you design a template 
that combines a ‘What's new list with a headline 
summary, the content providers for your site can use 
their own judgement to rotate the material that’s 
highlighted. That first page should include the 
Navigation tool that runs through the rest of your site, 
whether it’s a sidebar with extended information ora 
simple navigation bar along the top of the page. 

The positioning of your navigation is important as 
well. Whatever system you choose, users should be 
able to see it within the first screen of a page. 
Otherwise they'll have to scroll down to find it whether 
they want to look at the content of that page or not. If 
your pages contain information that fills more than one 
screen, it’s also a good idea to place additional 
navigation at the bottom of the page. This doesn't have 
to be fancy, a plain set of text links will do, just as long 
as your users don't have to scroll all the way back to 
the top to move on. Perhaps most importantly, your > 
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Yahoo is effectively one huge navigation system. One element 
that has been widely copied is the directory style page heading, 
which tells users where they are in relation to other places in 
the site, complete with active hyperlinks. 
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Arecent revamp of the navigation system at the BBC means 
that all their Websites are now unified under the BBC branded 
grey navigation strip. Selecting an option takes you to a more 
comprehensive listing. 
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Laser 


Category: Digital, Science 
Author: GUIStuff 
Downloaded: 8300 Times 
: User Rating: GREED 
Digital = (Rating: 9/10... Votes:1922) 
Wachdnicel Navbar: Expandable 
Sports” Header: Attached 
Se Download Types: Flat TIFF, PSO, Sliced HTML, 


Generator-Enabied 
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GUle With: 
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Note: The following is a low-resolution, low-quaility JPEG. 
PI proceed to download the full version. 


Proof that you can stick to usability guidelines and make navigation systems that look the business can be found at 
[w] www.guistuff.com. Download some of their free templates or use them as inspiration to build your own. 


navigation tools should be consistent throughout 
your site. 


Where have | been? 


Showing your users where they've been gives thema 
sense of location within the site and informs them 
where they are in relation to everything else. It also 
informs them how much of the site they've looked at. If 
you use the hierarchical labelling tip mentioned 
above, your user will be able to see which sections 
they've been through to get to the one they're currently 
in. In other areas of the site, users should be able to 
tell where they've been by looking at the text links. By 
default, text links change colour when they've been 
followed. As a designer, you have the ability to change 
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At [w] www.nooface.net you'll find news on interface design. 
From true VR to systems that respond to musical cues, these 
systems are the future of multimedia navigation. 


the default colours for text links either using style 
sheets or <body> tag parameters. Although the 
standard advice says that it's best to leave hyperlinks 
blue and visited links purple, this is a bit of an old- 
fashioned view. If you use a specific colour for all links 
within a text bar, then you've set a precedent for the 
page and the overriding desire for consistency dictates 
that all links should use that colour. The only real rule 
you need to follow when choosing hyperlink colours is 
that they show up well against your background and 
that they stand in contrast to your main text. As for 
visited link colours, it’s more advisable to make them 
grey than purple, following the standard interface 
design practice that tells users that ‘greyed out’ 
choices aren't valid. Another choice is to make visited 
links a lighter, more washed-out shade of the colour 
you use to denote a link. 


Room to manoeuvre 


If we've so far given you the impression that there’s 
little room for free expression in the design of Web 
navigation, then you're partly right. There are tried and 
tested methods of designing information flow and 
navigation structures that work again and again. But 
that doesn't mean to say that you can't attempt to make 
things feel fresh. In some ways, the best inspiration 
can come from sites whose navigation is wilfully 
obscure and in finding ways to adapt the aesthetic feel 
of those systems so that they fit the rules. 

Some Web usability gurus frown on any type of 
graphic navigation system whatsoever. We think that 
the Web would be a pretty boring place if all you had to 
play with were text links and back and forward buttons. 


The tutorial 


In the following tutorial, we're going to design 

the information flow for the Arbuckle’s Ales 

Website and begin to fashion navigation tools. 

Though we stick to the rules pretty closely, the look 
and feel of the site is anything but staid and sober. 

We use the theme of the site to produce an information 
design that is striking without being overbearing 

and that can be used to house a variety of different 
kinds of content. EES 
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information design 


Designing the information flow for Arbuckle’s Ales Website 


Part 1: Mapping 


Mapping out your site in detail before you begin will minimise surprises later on 
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Still working on paper, we then listed regular 

categories — a front page and a contact page. 
From that list we were able to determine what kind 
of directory structure would be needed to contain 
the site, and we sketched that out as well. 


pencil. With the Arbuckle's site we knew that 
certain kinds of content would be included in the 
site, so we began by listing all the types of content 
that would go into the page. 


Keyboard quickies 


Instead of using the Context 
menu, you can hit Control-Shift- 
Alt-N (Windows) or Command- 
Shift-Option-N (Mac) to create a 
new folder in the site window. 


To quickly rename a folder, 
select the folder name and click 
onitonce. 


—— 


G When you click OK, the right pane of the Site 
window changes to show the inside of the 
‘arbuckles' folder. Select the folder and Right-click 
(Windows) or Control-click (Mac) to bring up the 
context sensitive menu. 


In the Local Info category, give the site the 

name ‘Arbuckle's Ales’, then browse for the 
folder named ‘arbuckles’ that you created in the 
Local Root Folder box. All the other categories can 
be ignored for the time being. 


8 | Find the ‘images’ folder on the CD and copy its 
contents to the ‘images’ folder inside the 
‘arbuckles' folder on your hard drive using Windows 
Explorer or the Mac Finder. You may have to click 
‘refresh’ on the Site window for Dreamweaver to list 
the images you've copied across. 


Rename the first folder ‘images’, then rename 
the remaining folders ‘media’, ‘database’, 
‘resources’, ‘library’ and ‘templates’. Go to the cover 
CD in Windows Explorer or the Mac Finder and find 

the example site. 


The next step is to create that directory 

structure locally. Make a new folder on your 
hard drive labelled ‘arbuckles’, then launch 
Dreamweaver 4 or Dreamweaver UltraDev 4. |n the 
Site window go to Site>New Site to launch the Site 
Definition dialog. 


Select New Folder from the Context menu to 
add a new folder. Repeat this until you have six 


folders within the root folder. Select the first of these 
folders and bring up the Context menu again. 
Choose Rename. 


You now have a full directory structure for 

your site. Starting with this level of 
organisation helps you to keep track of all your 
media and resources throughout the project. > 
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Part 2: Rollovers 


Using JavaScript to write to the status bar, we can create 
rollover buttons from an image map 


Navigation links 


home — contents.html 
beers/catalogue — 
catalogue.html 
logos/phone logos — 
mobile.html 
video/safety video — 
promo.htmt 
game/flash game — 
flashgame.html 
fridge/3d discount fridge — 
3dfridge.htmt 

contact — contact.html 
credits — credits.html 


Status text 


home — \'Return back to the 
contents page\’ 

beers — \'Browse our catalogue 
of imported ales.\’ 

logos — \’Get a logo for your 
mobile phone.\' 

video — \’Check out our video 
and enjoy your beer safely!\’ 
game — \'Flash brings a whole 
new meaning to the phrase 
Drinking Game.’ 

fridge — \'Look in our 3D 
Discount Fridge for bargains!\’ 


The backslash symbol '\' is used 
so that the browser ignores the 
single quotes and doesn't 
terminate the JavaScript 
commands early. 


Pa] Once the site layout's ready, go to File>New to 
make a new document in Dreamweaver. Save 
the blank document as imagemapnavigation.html in 
the root folder of the site. Doing this before adding 

content enables you to add relative links to the page 
without the code breaking. 


4 | You can either repeat this process for each 
button or copy and paste a new hotspot for 
each. Hit Ctrl-C (Windows) or Command-C (Mac) 
while a hotspot is selected, then Ctrl-V or 
Command-V to paste. 


At this stage, go through the code for 

your image map, adding the ‘onMouseOver' 
and script to each button. The messages to attach 
to each one are listed in the sidebar on the left 
of the page. If you get lost, open the file 
imagemapnavigation.html from the folder on the 
cover CD for reference. 


Open the Objects panel by going to ( 

Window>Objects if it isn't already visible. Click 
on the Insert Image icon and browse to the ‘images’ 
folder in your site. Open the file navimagemap. gif, 
making sure that the ‘Relative To:’ dropdown in the 
Open dialog is set to Document. 


G Select your first hotspot button again. In the 
Link box in the Properties panel, type in the 
URL ‘contents.html’. Add links to the remaining 
buttons in the same way. Refer to the sidebar for a 
full list of buttons and their corresponding URLs. 


8 | To change this script into a Dreamweaver 
Library item that can be dropped into any 
page, open the Library panel by going to Windows> 
Library, click on the page to deselect any highlighted 
objects, then hit Ctrl+A (Windows) or Command+A 
(Mac) to select everything on screen. 


Select the Oval Hotspot tool and carefully 

draw a hotspot over the ‘home’ button. You 
can move the hotspot after you've drawn it by 
selecting the Arrow cursor in the Map section of the 
Properties panel. 
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6 | When you're done, select the first button again 
and choose the Show Code View and Design 
Views icon. The image map code associated with 
that hotspot is highlighted. Add the following 
JavaScript within the highlighted <area> tag; 


onMouseOver="setTimeout(‘window.status = 
\'Return back to the home page\",1); return true” 


9] Click and hold on the selected items and drag 
and drop them on to the Library panel. You'll 
be prompted to enter a name for the new Library 
item. Type in Navigation Map. You can save the 
original HTML file before closing if you wish. 


Part 3: Text navigation 


We provide rollover text navigation so that users have an alternative 
to the image map when they're looking at content ‘below the fold’... 


External affairs 


Using an external style sheet 
makes it easier to update the 
whole site in one go if necessary. 
To alter the font format for the 
entire site, all you have to do is 
change the external style sheet. 


= 190-8859-1"> 


Go to File>New to make a new document in 
Dreamweaver. Save the blank document as 

textnavigation.html in the root folder of the site. If 

you do this before adding content, you can add 


relative links to the page without the code breaking. 


pacitiecd Pocumente/eatie> 
jtp-equive "Content-Type" conteat="text/ntmi: charset=tse: 


LOE*MMFTTFTY™ cexc="#000000"> 


4 | Go to Windows>CSs Styles. Click on the 
menu arrow in the top-right corner of the 
panel and choose New Style. Check Use CSS 
Selector and choose ‘a:hover’ from the dropdown. 
Check Define In: (New Style Sheet File). 


Add a third style using the CSS Selector 
‘a:visited’. In the Style Definition dialog, set 

the Font Type to Verdana, Arial, Helvetica, 

Sans-serif, Size to 12 pixels and Colour to #999999. 


tAtlerUntitied Document</titie> 
cmete http-equive"Content~Type" contente"text/html; charset+iso-8659-1"> 
fea 


ty bgcolor="SFFPTIT* text="#000000"> 
pee | catalogue | order online | safety video | fimsh game | Sd discount fridge 
I contact | credited 
peoay?> 


4 Prataasalscnatisastaatasah 
i ‘home | catalogue | order onkne | safety video | lash game | 34 discount fridge | contact | credits 


Type the following into your page ‘home | 

catalogue | order online | safety video | flash 
game | 3d discount fridge | contact | credits’. If you 
can't find the ‘I' character on your keyboard, go to 
Code View and type in ‘&#124;' instead. 


G Give the new style sheet file the name 
‘styles.css' and save it in the root folder of 
your site. In the Style Definition dialog set the Font 
Type to Verdana, Arial, Helvetica, sans-serif, 
Decoration to underline, Size to 12 pixels and 
Colour to #CC9900. 


(font-family: Verdana, arial 


+ Helvetica, sans-serif; 
decor at 


rf 
ly: Verdana, Arial, Helvetica, sans 
size: 12px; color: #999999; text-decoration: none} 


8 | Click OK, then open Notepad (Windows) or 
Simple Text (Mac) and load stylesheet.css. On 
the line that contains a:link add a:active and a so 
that it reads; 


a:link, a:active, a 


a 
te catego | err ca | ebory eo | Lass gue | Sé daca dg | coatct | recee 


Select the text ‘home’ and go to the Properties 

panel. Type the URL ‘contents.html’ into the 
Link box. Add links to the other categories using the 
information in the sidebar as a reference. 


G Add a new style using the CSS Selector ‘a:link’. 
In the Style Definition dialog set the font type 
to Verdana, Arial, Helvetica, sans-serif, Size to 12 
pixels and Colour to #003300. 


EAtLeUnt ited Document</tatie> 

betp-equive*Concent-Type” content=" 
Jiok veis"stylesheet” href="styles.ces” 
heod> 


9 | Select the text links in your page then drag 
them to the Library. Give the new Library item 
the name ‘Text Navbar’. In order to use the Library 
file in a page you will need to drag and drop it to the 
page you're building and make sure the style sheet 
is attached using the Attach Style Sheet option in 
the CSS Panel menu. EEE) 
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Optimising graphics for the Web can be a delicate task, even when 
you've got the right tools for the job. We take an in-depth look at 
the Web's most important bitmap formats... 


he way you produce images for your Web 

pages can make or break your site. Make the 

files too large and people will get bored of 

waiting for your pages to download, don't use 
them at all and your site will look old fashioned, 
sprinkle them around willy-nilly and you'll come off as 
a rank amateur. Getting the balance right is one of the 
most difficult aspects of Web building. To help you 
make the right decisions, we take a look at the features 
of the main formats available. 


Bitmap formats 


The Web has only two widely accepted bitmap image 
formats. The first and most popular is the Graphics 
Interchange Format (or GIF) developed at Compuserve 
specifically for transmission across networks. An 
indexed colour format with a maximum palette of 256 
colours and a range of other less well known features, 
GIFs are good for simple images that feature solid 
colour. They’re ideal for icons, logos, buttons and 
graphics that feature a limited colour range. The GIF 
format uses a data compression algorithm called LZW 
compression (Lempel-Ziv-Welch) that is capable of 
reducing the size of images to a realistic maximum of 
10 per cent of their uncompressed size. In everyday 
use, a more realistic average is between 50 per cent to 
60 per cent after colour reduction. 

The simple animation capabilities of the GIF format 
explain some its popularity. GIF supports multiple 
stacked images in a single file, automatic playback, 
external control, forward and reverse looping, single 
palette indexing and is, all in all, far more 
sophisticated than it appears at first glance. Netscape 
started its support of animated GIFs back in 1995 in an 
early beta of Navigator 2, and the first ever animation 
in the format appeared in December of that year. Half a 
decade on, you can't move on the Web without 
bumping into them. Animated GIFs are in advertising 
banners, page logos, rollovers, headings... in fact 


anywhere you can put an image you can puta GIF 
animation. 


GIF compression tricks 


The GIF format has a number of features that you can 
take advantage of to get the best out of your images, 
although it isn’t always practical to use all these tips 
all the time. GIF images are compressed ona 
‘horizontal repetition’ basis, for example, mirroring the 
way the way the file format is written. A block of colour 
ora line running horizontally across your image will 
compress to the smallest size possible. This has the 
advantage that images with strong horizontal patterns 
compress more effectively than images with random 
backgrounds. You can actually see that GIFs are made 
up of horizontal data if you choose to save an image as 
an interlaced GIF Instead of saving each line in order, 
interlacing saves and displays the data in four separate 
‘passes’ in sequence. When interlaced GIFs display on 
screen you may see a sort of ‘venetian blind’ effect as 
they're written line by line. In most cases, interlacing 
an image will result in a larger file size than not 
interlacing. The main use for the process is when 

you want users to see some indication that a large 
image is downloading. 


Web safety 


GIF images store their own colour palette of up to 256 
colours using RGB values. Reducing the size of the 
colour palette is a sure-fire way of reducing the size of 
the resulting file. The format includes a dithering flag 
that can be set to compensate for the reduction in the 
number of colours available, though using the setting 
increases the file size. Ironically, it may make the file 
even bigger than the original, less compressed 
version. The visual results of pre-dithering aren't 
always appealing either — but in circumstances where 
your browser may dither an image instead, on low > 
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The GIF format is best used for images that have a simple 
structure, areas of flat colour and few gradients, like this 


cartoon image. 
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Photographic images benefit from the true-colour features of 
the JPEG format and an aggressive compression routine whose 
shortcomings are masked by the colour and shade transitions. 


resolution systems when you're working with a limited 
palette, it may be the lesser of two evils. 

If you use a graphics creation program like 
ImageReady or Fireworks, you will have noticed that 
they have options to create images using Web-safe 
colours. Some designers have got out of the habit of 
using these settings, assuming that in the age of 32MB 
video cards, the practice is redundant. The problem 
isn't always whether a machine can display a set of 
colours, but whether it displays them correctly. 

The Web-safe palette, a set of 216 indexed colours, 
has become a standard by default. Originally it was the 
palette that Netscape Navigator used to handle GIF 
images on 16 or 256 colour systems. A similar palette 
was later adopted by Internet Explorer, though it’s 
arranged slightly differently. On 8-bit systems, any 
image that doesn't conform to the Web-safe palette is 
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Google established itself as the best search engine on the Web 
a couple of years ago. Now you can go to [w] http://images. 
google.com and use the same technology to search for images. 
You're sure to find the source material you're after, but make 
sure you respect the copyrights of others. 


still rendered using it, leading to unpredictable results. 
Depending on how the browser's preferences are set, 
it will either dither the image using the colours 
available or simply replace them with colours from the 
216 colour palette. In either case, the results aren't 
ideal. Web-safe colours continue to have relevance 
even though PC users have more highly specified 
systems because there are an increasing number of 
new low resolution systems coming online. 

PDAs and set-top boxes may only be capable of 
displaying limited colours and there continues to be 
discrepancies between the default colour palettes 
used by different operating systems on consumer 
desktops. Using the same palette for all images is 
good practice in speed terms too. Each time your 
browser finds a different palette, it has to recalculate 
how to display the image. It doesn't have to do that with 
Web-safe images. 

Any modern graphics package will enable you to 
create images using the 216 colour Web-safe palette, 


PEG Grunchor Pro 2.0 is a powertul desktop version of Spinwave’s revolutionary or-line image processing tool, JC 
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GIF Cruncher Desktop gwes you all the power of GiF Cruncher on your own Windows or Macintosh machine. 
Crunch = much as you want to without having to be online Desktop uses exactly the same optimization engine 
‘a8 the online version - but it ru in the privacy and controlled environment of your own computer Purchase your 
copy for only $49.95! hams : 


Go to [w] www.spinwave.com/crunchers.html to find free GIF 
and JPEG optimisation tools online. 


but if you want to create your own sub-palette to work 
with, there's a quick way to remember which colours 
are safe. The three parameters that define an RGB 
colour are chosen from just six values: 0, 51, 102, 153, 
204 and 255. So, from that we know that setting an 
RGB value of 51, 204, 51 or 0, 0, 102 will create colours 
that are safe to use in Web page graphics. If your 
package enables you to choose colours using HEX 
notation (like HTML) the values available are FF, CC, 
00, 33, 66 and 99. 

While using the 216 colour palette is still good 
practice when you're creating pages for a general 
audience and optimising every component is 
imperative, there are circumstances when you can 
give yourself more leeway. When optimising 
existing images, it isn’t always practical to impose the 
Web-safe palette: whatever you do, the result may look 
poor. You may also feel that your audience is going to 
be predominantly made up of users whose platform 
type you can predict. In those circumstances, you can 
use the best compromise instead — and that’s using 
WebSnap colours. Fireworks and Photoshop (including 
ImageReady) give you the option to save using a 
WebSnap Adapative palette, which changes as many 
of the colours in your image to Web-safe colours as 
possible. In Photoshop you can change the percentage 
of ‘Web Snapping’ using a slider, while Fireworks 
enables you to select colours individually. 


Photo reality 


JPEGs (Joint Photographic Experts Group format files) 
are used less frequently in day-to-day Web design, 
though their true colour capability and kilobyte 
crunching compression abilities make them ideal for 
greyscale or colour photographic images or graphics 


The latest news about the PNG and MNG formats, including 
up to date reviews of support for them in your browser, is at 
[w] www.libpng.org 
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[w] www.jpeg.org is the home of development news on the JPEG format, including its projected replacement JPEG2000 - a format with 


a range of more advanced features. 


that feature complex, graded transitions. However, 
JPEGs’ lossy compression algorithm makes them a 
lousy choice for less busy images which more readily 
show up errors in display. 

With JPEG images, as with GIFs, the settings 
you select on import from your image-processing 
package are the key to the size of yourfile. With 
the format’s lossy compression algorithm you may 
have to trade a loss in quality for gains in speed. The 
level of compression you apply is adjustable and the 
more compressed the file, the more distorted the 
result may be. 

Unfortunately, there’s no standard best setting when 
saving JPEG images for the Web. In fact, the 
percentages you see in the export dialogs of different 
graphics packages don't even correspond with one 
another. The most effective method is to use an image 
processing package that enables you to preview what 
the saved file will look like before committing to a set 
of compression options. JPEG compression is more 
aggressive than the LZW algorithm used in the GIF 
format, resulting in files that can be up to 5 percent > 
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Unisys holds a controversial patent on the compression type 
used by GIFs that requires image software manufacturers to pay 
them a license fee to use the format. [w] www.burnallgifs.com is 
acampaign against this practice and a repository for PNG tips. 
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Vector images 


The Web would seem like the ideal platform for a compact, 


high quality vector image format, but after eight years of 
graphical browsing, a true standard has yet to emerge. 
Macromedia's Shockwave Flash format is the closest thing 
we've got. Although it requires a plug-in, both major 
browsers ship with it by default. Ironically, though Flash 
started out as simple drawing and animation package, it has 
evolved ina different direction entirely — and its vector 
capabilities are lacking in comparison with formats that 
haven't gained much of a foothold on the Web. The Flare file 
format which you can use to publish Xara-originated or 
converted vector documents is one of few survivors. 


Although the format is impressive looking, it’s still plug-in 


Sometimes you need an image that can't be quickly generated or sourced through Clip art. Why not grab one of the many shareware 3D 


based and poorly distributed. A clear acknowledgement of 
the format’s dwindling popularity can be found in Xara’s 
support for SWF export. 

Microsoft Internet Explorer quietly supports a format 
called VML (Vector Mark-up Language) which enables it to 
display simple vector shapes inline, but it’s vastly underused 
and not much good for anything complex. That leaves us with 
SVG (Scalable Vector Graphics), a relatively new format that 
combines features of VML with more advanced XML 
powered functions. As an official W3C backed format, it’s 
currently being championed by Macromedia and Adobe 
in particular, which ship their own SVG plug-in with their 
latest packages. 


of their original size. Even with relatively light 
compression options though, JPEGs don't deal well 
with flat areas of colour or sharp edges, making them 
useless for many everyday Web graphics chores. 
Another problem with the format is that its lossiness 
— the distortions it produces in heavily compressed 
images — is accumulative. In other words, there’s no 
way to regain the data lost in the compression process. 
Some of the format's limitations can be overcome by 
selectively compressing areas within an image at a 
different ratio to other areas using either Fireworks or 
ImageReady. This is ideal for larger photographic 
images when you want to get the foreground details 
clear, but you can afford some background distortion. 
Photographic quality JPEGs can take up a lot of 
bandwidth, but you can make the wait seem less if you 
encode your photographic images as progressive 
JPEGs. Like interlaced GIFs, progressive JPEGs area 
format option that enable the image to display before 
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model renderers available at [w] www.3dsite.com then head over to [w] http://avalon.viewpoint.com/ to download free 3D objects. 
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The Scalable Vector Graphics format, an official standard 

in development at the World Wide Web Consortium, is 
gradually making an impact on the Web. To see it in action, visit 
[w] www.adobe.com/svg/ 


it has been fully downloaded. While the practice isn't 
particularly useful for GIFs, it makes more sense with 
the larger files sizes that can result from JPEGs. 


The third way 


There is a third bitmap format for the Web that is better 
on paper than the other choices. The Portable Network 
Graphics format (PNG) has long been touted as a 
replacement for both GIF and JPEG — embodying the 
best attributes of both formats. The browser 
manufacturers have been slow to adopt full support for 
the format, implementing some features of the format 
while ignoring significant functions like Alpha 
transparency. Older browsers (the versions 3.0s) don't 
support them at all. Those in the know suggest that the 
best browser support for PNG comes from Netscape 
6.0, the Mac version of IE 5.5 and, ironically, WebTV. 
PNG has other problems. Touted mainly as a 
replacement for GIF with superior transparency and 
built-in Gamma correction, it has high-end features 
that seem to make it more suitable for print-based 
projects rather than the Web. 

There's support for high colour resolutions and the 
results look good, but photographic images turn out 
much larger in file size than the existing JPEG format. 
While PNGs are proving a good substitute for the GIF 
format in regular use, the animation features that are 
an important part of the older format are missing from 
PNG, annexed into a separate project called MNG 
(Moving Network Graphics). For the time being GIF and 
JPEG are still the main formats to choose. 

Simply knowing which format to use isn’t enough 
though. ‘Smaller is faster’ should be your mantra from 
now on. Mumble it incessantly as you build your 
pages, chant it as you save image files, have it tattooed 
on your eyelids if necessary. Every image you create 
should be as small in file size as possible without 
compromising quality. 


The tutorial 


In our tutorial we use Fireworks to create images that 
use optimised, Web-safe colours. As part of that, we'll 
use features that enable you to make side-by-side 
comparisons of different compression options so that 
you can choose which setting is the best for the job. 
We'll also explore the ways that the package enables 
you to choose palettes for your images, and look at a 
3D rendering tool for generating Clip art. FES) 


|. provided by Karl Hodge [el hodge@spodgod.com 
{t]01484 845201 


Creating Web graphics 


Using Fireworks 4, we put our arcane knowledge of the GIF format to good 
use as we build and optimise the graphics for the Arbuckle's Ales site 


Part 1: 3D buttons 


Why bother with Clip art objects when you can generate your own using a flexible 3D model? 


Fonts 

Before starting the tutorial, make 
sure to copy over and install the 
fonts from the resources/fonts 
folder on the cover CD before 
viewing the files. Windows fonts 
have the extension ‘ttf, Mac 
versions ‘.mtt’. 


3D Exploration 

You can find out more about the 
3D model viewer 3D Exploration 
at [w] www.righthemisphere. 
com/3dexploration/ 


a Install and launch 3D Exploration if you're 
in Windows. Mac users can skip to step 5. 
Open the file bottlecap.3dm from the cover CD. 
Use the Explorer pane on the left to find it. Once 


the model is loaded, go to Tools>Options and 
select Colors. 


Tracing as the Render Type. Leave the other 
options at their defaults. Save the file as 
bottlecap1.tga in the resources folder. When the 
render has finished, go back to the main window 


and drag on the model to realign it. Choose Render 


to File again and save it as bottlecap2.tga. 


Paste the bottle cap into the new document 
and use Commands>Document>Center in 
Document to centre the image. Go to Modify> 
Image Size and resize the image to 75x75 pixels. 
Select the Rectangle tool and in the Fill panel, 


set the Fill Type dropdown to Solid and the Colour 
to #CC9900. 


4 | Choose TARGA Image as the File Type and Ray 
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down and find the three Default Material entries. 


Use the Define Custom Colours dialog in the Colour 


palette to set the Ambient colour to RGB 0, 51, 0. 


G Start Macromedia Fireworks and open the 
files bottlecap1.tga from either the root 
directory of your site. Using the Magic Wand 
tool, select the white area of the image. Switch 
to the Marquee tool and, holding down the 
Shift key, select around the Rendered by 

3D Exploration banner. 


pixels. Click within the rectangle with the Text tool, 
and in the Text editor set the Font Style to Bookman 
Old Style, bold, the Size to 20 and the Colour to 
003300. Type ‘home’ and click ‘OK’. 


Ea Double-click on the Scene Background item to 
bring up a Colour palette. Set it to white. Scroll 


8 | Draw a rectangle across the bottle cap. Use the 
Info panel to set the size of the shape to 60x25 
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3] Set the Diffuse and Specular colours to RGB O, 

153, 0. Click Apply then OK. Click and drag on 
the bottle cap model to reposition it. Try to align it 
so most of the surface is facing front. Go to the File 
menu and choose Render to File. 


6 | Go to the Modify menu and choose 
Marquee>Select Inverse. Go to Edit>Copy, 
then File>New. In the New Document dialog, make 
the document size 250x250 pixels and the 
background transparent. 


SSE ie 


g Align the text within the rectangle, using the 
arrow keys for fine positioning, then Shift-click 
to select both the text and the rectangle. Go to 
Modify>Group to group the objects together. Next 
go to Modify>Transform>Numeric Transform. > 
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10, Select Rotate from the dropdown menu, 
WW type in ‘-30' and click on ‘OK’. Adjust the 


label using the arrow keys so that it fits within the - 12 | : ¢ bi p } 
surface of the bottle cap. You can also try selecting rt] Go to File>Menu and save the finished button “i selecting, copying, resizing the file and adding 
both the bottle cap and the label group, going to aD as buttontemplate1.png in the resources folder _ a button label as previously described. When you're 
Modify>Align and use the centring options to align in the root folder of the Arbuckle's site. Now open done, save the document as buttontemplate2.png 
the label. the file buttoncap2.tga within Fireworks. in the resources folder of the Arbuckle's site. 


Part 2: Single image optimisation 
We've built the button templates, now we'll create a navigation bar and optimise it for the Web 


Resources 


This tutorial presupposes that 
you've already created the site 
structure described in the 
tutorial on navigation design 
(page 13). Before you start, you 
need to copy the following files 
from the CD to your hard drive: 
bottlecap.3dm 
bottleindica.png 
arbuckleslogo.png 
smalllabeLpng 
pageheader.png 


H 


i 


ee Go to File>New to create a new image at 2 y With the group selected, go to Edit>Copy & | Try to arrange the buttons as shown. They are 
ae 140x340 pixels. Open buttontemplate1.png GaP and then paste four copies of the image into eH placed within the image to look fairly random, 
from the resources folder in the root folder of your the new empty document. Open buttontemplate2. but they must be sufficiently spaced so that you can 
Arbuckle's site. Go to Edit>Select All and then png, group the objects and copy them to the apply hotspots to them. Select the second button in 
Modify>Group to group together all the objects in clipboard, then paste two copies of the image into your image and go to Modify>Ungroup. 

the template. the same document. 


stall 


Gg Double-click on the second button's text to 


6 | Go through the palette, keeping an eye on the 
2) preview image, altering as many colours to 


bring up the Text editor. Type in ‘beers’ and 5 | The colours that are Web-safe are indicated by | Web-safe as you can without degrading the image 
click ‘OK’. Rename the remaining buttons ‘logos’, 5 | a dot. Find the first colour in the palette and too much. You may only select five or six additional 
‘video’, ‘game’ and ‘fridge’. To export the file, goto —_— then look for one that's similar and click to select it. colours, but you could shave off a kilobyte or two. 
File>Export Preview. Choose WebSnap Adaptive Click the Snap to Websafe button to change the Save the file as navimagemap.gif in the ‘images’ 
and choose 128 from the index number dropdown. selected colour. folder of your site. 
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Part 3: Custom palettes 


Optimise all your files with one custom palette setting 


Button templates 


Our button templates can 
easily be adapted to create 
more conventional rollovers. 
Just select the entire image 
and go to Insert>Convert to 
Symbol. Double-click on the 
image to add ‘over’ and ‘down! 
states to the button. 


PNG or PNG? 


Confusingly, the Fireworks PNG 
format isn't the same as the PNG 
format that is currently becoming 
popular on the Web. However, 
you can export to the real PNG 
format from Fireworks, 8-bit 
PNG files can be optimised in the 
exact same way as GIFs in the 
Export Preview dialog. 


ay The problem with using Websnap adaptive 
“= palettes on multiple graphics destined for the 
same page is that you can end up with subtle 
variations of colour. This is particularly noticeable 
when you're making slice objects. The solution is to 
create a benchmark file containing the palette you'll 
use throughout. 


@ When you're happy with the selections 
"9 you've made, click the Snap to Web Safe 
button. You can remove individual colours by 
selecting them and toggling the button off. Repeat 
the process for any other colours that were 
originally flagged as Web-safe. 


ss = eed Se es ea Te ve 
Fa GIF files have a palette embedded within them 
that Fireworks extracts and can apply to any 
image as a custom file. Once applied, go to 
File>Export and save the file as arbuckleslogo. gif. 
Apply the same Custom palette to smalllabel.png 
and save it as smalllabel. gif. 


FHeWOrKs ~ Dotwemaca. png 


ff bottleindica.png 


& u Export>Preview and set the palette to 
WebSnap Adapative. Set the colour index to 64. 
Only a few colours in the palette are actually Web- 


safe, as indicated by a dot in the middle. 
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f ry Export the file as bottleindica.gif to the 

“S® ‘images’ folder within your site. Open up the 
files arbuckleslogo.png and smalllabel.png from the 
CD. Select arbuckleslogo.png and go to the 
Optimise panel. 


A custom palette may also be applied 

to multiple slices. Open pageheader.png and 
Ctrl-click or Command-click on each object to select 
it. Go to Insert>Slice and with all the slices 

still selected, choose Custom from the Indexed 
Palette dropdown. 


wiaiefoy sla) 


Look at the first Web-safe colour in the palette 

and compare it visually with other colours. Pick 
out those that come closest to the Web-safe colour 
and Ctrl-click (Windows) or Command-click on 
them to make a multiple selection. 


Choose GIF as the Export File Format then 

select Custom from the Indexed Palette 
dropdown. In the Open dialog choose GIF from the 
Files of Type dropdown and choose bottleindica. gif. 


™ Before exporting, select each slice individually, 

? go to the Object panel and uncheck 
auto-name slices. Rename them as bottleindica, 
arbuckleslogo and smalllabel. When you export, 
choose Images Only and Export Slices. Make sure 
Selected Slices Only is checked and Include Areas 
Without Slices is unchecked. FEE 
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Layout on the Web 


For designers moving to the Web from other media, the biqgest 
hurdle is learning to qain basic control over layout. In this feature, 
we summarise some basic and advanced design techniques... 


espite the availability of powerful and 
mature Web design applications such as 
Macromedia Dreamweaver and Adobe 
GoLive, the way in which design is 
achieved on the Web sometimes seems staggeringly 
cumbersome and primitive — particularly when 
contrasted with the way we do design for print 

and multimedia. 

For designers moving to the Web from other 
media, such as print or CD-ROM, the biggest hurdle is 
learning how to gain basic control over layout without 
resorting to tempting but desperate measures such as, 
for example, turning the whole page into one 
big image... 

Many designers find the lure of page and 
pasteboard irresistible and veer off into the simpler, 
from a layout perspective, area of Flash design. Other, 
hardier souls persevere with real Web design, slowly 
learning to respect the code, reducing their reliance 
on pixels, and gaining an understanding of browsers, 
their peculiarities and how to work around these. 

In this feature, we explore some of the issues 
surrounding layout on the Web, summarising basic 
and more advanced design techniques, and look at the 
special constraints that the screen imposes on layout. 

In the tutorial that follows, we'll put some of these 
ideas into practice when we take the design for our 
fictitious Arbuckle’s Ales Website and implement an 
HTML template for it in Dreamweaver. 

There are two main approaches to actually 
constructing layouts for the Web: 


Table-based design 

Look at any Web page, and the design will almost 
certainly be created using tables. An invisible grid of 
rows and columns holds images, text and multimedia 
elements together on the page; slightly resembling 
(yet still a far cry from) the clean grids and layout 
boxes used in print or multimedia designs. It’s still 
essential for Web designers to be proficient in this 
method of constructing pages, but its future may be 
limited as we see a growing movement towards 
standards-based Web design using Cascading Style 
Sheets (CSS) positioning. 


CSS-based design 

This is a relatively new way of designing pages, based 
on the current Web standards instead of the 
pragmatic, table-based, non-standards-compliant 
approach. CSS-based design requires an excellent 
knowledge of HTML and Cascading Style Sheets, and 
uses CSS to control the behaviour of HTML container 
elements such as DIV tags in order to give positioning 
control over the text and images within them. 


We'll explore some of the issues surrounding CSS 
layout later on. 

CSS positioning has been supported by browsers 
since version 4.0, but doing layout with CSS is very 
much an esoteric art. This is mainly because the 
standard tools in Dreamweaverand GoLive only 
enable you to put together a limited and clunky 
version of CSS layout: to make CSS positioning a 
realistic alternative to table-based design requires 
hand coding and an enormous amount of knowledge 
and perseverance. 


Fixed versus liquid design 


Tables and CSS are the practical building blocks with 
which pages can be built. Somewhat more important, 
and in some ways even more challenging, is the 
question of what we're actually trying to build. 

One of the most troubling issues affecting Web 
design is the wide variety of window sizes that may be 
used to view pages. Window size is effectively limited 
by the user's screen resolution, but the window may be 
any size up to that limit. The user’s screen resolution 
affects the size at which they see images and text, and 
perhaps how many words per line they see if the 
designer has implemented a liquid design. 

When planning any design, you need to think 
carefully about the range of window sizes at which 
your page will be viewed, and how you wish the page to 
react to different window sizes. 

There are two kinds of page designs: fixed-width 
designs that try to make the page layout independent 
of the window size, and liquid designs that try to be 
proportional to the window size. 


Fixed-width designs 
Fixed-width designs, as their name conveys, are a 
fixed number of pixels wide and maintain this width 
irrespective of window size. 
* They may look just right if the window is the ‘right 
size’. [screenshot 1, over the page] 
- They may be too wide for a narrow window, in which 
case a scroll bar will appear to scroll the cropped area 
into view. [screenshot 2] 
- They may be too narrow for a wide window, in which 
case they can appear lost in a vast area of empty 
space. [screenshot 3] 

Most professionally-designed Websites use 
some sort of fixed-width design which usually gives a 
more designed look fora relatively specific target 
audience. Fixed-width designs always look their best 
at one particular screen resolution and at a small 
range of window sizes. They therefore tend to > 
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1. Viewed at around 800 pixels wide, 
ibm.com looks great. 


4. Eric Meyer is a CSS guru: this is a layout test on his 
personal site ([w] www.meyerweb.com) and looks fine ina 
regular window. 


ones tresyerweb .comjericicssfedge/conpleccspiralide nA 


5. At a very narrow size, the content reflows but the heading is 
cropped - not helpful for a PDA user. 


6. At a very wide size, line lengths are too long -a 
characteristic problem in liquid designs. 
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2. At 640 wide, scroll bars appear and the 
content is cropped. Notice how the design 
appears to be magnified. 


3. At 1400 pixels wide, the design looks 
tiny and floats lost in a sea of white. 


present less well the more the screen resolution or 
window size differs from that intended by the designer. 

Fixed-width designs will normally be created 
with at least one outer table that has its width set 
to a value in pixels. When creating fixed-width 
designs, it is necessary to choose a particular size to 
work to: this is normally based on an assessment of 
the likely audience. 

In current Web design, actual content widths 
between 720 and 760 pixels are most commonly 
found, because these give the biggest content area for 
users surfing at 800x600 screen resolution. This has 
the effect of partly excluding users with smaller 
screen resolutions, who end up having to scroll 
horizontally to see all the content. 

As offered in Dreamweaverand GoLive, CSS-based 
layout is only capable of doing fixed-width designs 
anchored to the top-left of the browser window: layers 
don't even centre in the window unless you can hand 
code this behaviour. 


Liquid designs 


Liquid designs are created to fit a variety of window 
widths, adjusting the proportions of their design 
appropriately to wider or narrower windows. 

There's usually a minimum practical size beyond 
which the design tends to look wrong, and there may 
be problems with excessive space being introduced 
into the layout at very wide window sizes. 

Line lengths for text will be a problem at 
extremely high screen resolutions unless the user 
makes their browser window a sensible size. 
[screenshots 4, 5, 6] 

Liquid designs are much more difficult to 
achieve than fixed designs but if executed well, they 
can offer more consistent presentation to a wider 
range of visitors, [see screenshots 7, 8, 9]. | mages 
tend to be floated within the design rather than 
constraining it. 


7.A successful liquid design at rest... 
([w] www.alistapart.com) 


8. In anarrow window, the right-hand 
navigation has re-flowed to the bottom 
where the user will benefit from it when 
they have finished reading the article. 


To create liquid designs, most Web designers will 
use an outer table with its width set to 90 percent or 
100 per cent. The internal columns of the table will 
mainly be set to percentage values too: this is what 
enables the content to re-flow at different window 
sizes while maintaining the proportions allocated by 
the designer. 


Basic techniques 


It’s possible to position design elements within the 
browser window using the three basic techniques 
offered by Dreamweaverand GoLive: tables, frames 
and layers. 


Tables 

Tables are the oldest means of positioning elements, 
and are still the most important. HTML tables are 
constructed using rows and columns of (usually) 
invisible cells which can have their width and height 
specified. Any content may be placed ina cell, and the 
cell contents may be aligned left, centre or right, and 
top, middle and bottom. This offers a great deal of 
layout control. Tables are well suited to creating both 
fixed-width and liquid designs. 


Frames 

Frames enable the display of different Web pages in 
the same browser window, and offer a different set of 
design options to tables. 

The window layout is controlled by a special Web 
page called a frameset page, which contains 
instructions on how to divide the browser window and 
refers to the content pages. Tables are used within the y 
content pages to control the layout of page elements: { 
frames control the way the content pages appear 
within the browser window. 

Frames enable design elements to be anchored 
reliably to the bottom or right edges of the window, or | 
to be centred horizontally and vertically in the window. 
Their most appealing property is to keep one part of 
the window still - usually a navigation bar - while the 
content area scrolls. 

Disadvantages are many, including problems . 
with users entering the site from search engines, 
book-marking and printing pages. Another issue is 
that there has been a general backlash against frames 
by clients, who often rule out the use of frames from 
the start. 

Frames are best suited to semi-liquid designs: 
because the window size is an unknown factor, at least 
part of most frame layouts must be set to a flexible 
width in order to be able to control the width or height 
of other areas. [screenshots 10, 11] 


9. Even in a very wide window, careful 
margin settings and positioning behaviour 
mean that the line length and layout are 
still fine. 


Layers 

Layers are the most recent option. The name is 
confusing if you're used to the Layers feature in 
applications like Photoshop or FreeHand: layers in 
Web design are fixed-position layout boxes, more 
similar to those in QuarkXPress. They can be drawn as 
layout placeholders in Dreamweaver or GoLive, and as 
far as the code is concerned, usually consist of DIV 
container tags with fixed positioning and size 
attributes applied using Cascading Style Sheets. 

Although layers seem to offer the most control over 
positioning page elements, they aren't as useful as 
tables for Web design. For example, if the size of the 
text changes, adjacent layers can't move in order to 
accommodate the changes in space required. This 
means that layout elements may end up over- or 
under-lapping each other inappropriately. By 
comparison, tables adjust cleanly to such changes. 
[screenshots 12, 13] 

Currently, layers are most often used for dynamic 
HTML applications where scripting has to be able to 
alter the position or visibility of page elements, rather 
than for basic layout. As implemented in GoLive and 
Dreamweaver, they are limited to creating top or 
left-aligned designs. They don't centre within the 
window and they don't stretch unless you customise 
the style that positions the layer. This means that to do 
liquid designs using layers, you're really entering the 
realms of CSS layout. 


CSS layout 


Cascading Style Sheets offer tremendous control over 
the layout of the page, but for the last few years > 
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What Is Positioning? 


10. Microsoft only uses frames when required for navigation. 
Here, a three frame layout covers top navigation, a hierarchical 
dynamic navigation menu, and a scrolling content frame. 
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11. Deepend UK created the Viaduct Website using Flash 
fronted by a wonderful DHTML scrolling frameset. Frames 
present the scrolling area vertically centred and right aligned. 


12. Webmonkey is written by some of the most knowledgeable 
and funny Web writers around. Their new design looks great... 


Lies, damned lies and... 


Statistics are a dangerous but necessary element in deciding 
on your layout strategy: we need to know how many people 
use the different browsers and screen resolutions that affect 
how we design our pages. 

It's best to get this sort of information from your own 
server logs, but in the absence of specific information, the 
next best is general information taken from as wide a sample 
as possible 

Statmarket.com is the best resource for online 


Statistics, but they charge thousands of dollars for their 


Browsers 

1. MSIE 5.x 

2. MSIE 6.x 

3. Netscape 4.x 
4. MSIE 4.x 


5. Netscape comp. 


278,178,129 (71 percent) 
43,831,660 (11 percent) 
21,372,007 (5 percent) 
21,290,621 (5 percent) 
16,873,963 (4 percent) 
3,056,679 
1,658,408 
1,283,236 
840,446 

453,012 

402,462 


6. Unknown (0 per cent) 


7. Netscape 6.x (0 per cent) 


8. Opera x.x 


(0 per cent) 
9. Netscape 5.x (0 per cent) 
10. Netscape 3.x 
11. MSIE 3.x 

12. MSIE 2.x 400486 
13. Netscape 2.x 12,023 
14. MSIE 1.x 767 


15. Netscape 1.x 


(0 per cent) 
(0 per cent) 
(0 per cent) 
(0 percent) 
(0 per cent) 
(0 per cent) 


Thecounter.com offers a useful global stats facility. 


13. ... until you make your window ridiculously small. OK, it’s not 
exactly fair, but your layers could easily end up like this too... 


information. TheCounter.com doesn't yet charge, but has 
similarly high samples to report on. Both these sites offer 
visitor counters, and capture data from the many thousands 
of sites that use their free and subscription services. The 
figures aren't necessarily representative of any individual 
site: they are a gross average of a very mixed population 
Here are details of overall browser versions, platforms 
and screen resolutions according to theCounter.com for a 
period of 20 days in November: note the figures for version 


3.0 and version 4.0 browsers. 


Operating systems 

1. Win 98 268,938,243 
2.Win 2000 52,281,096 
3. Win 95 27,266,737 
4. Win NT 21,243,065 
5.Unknown 8,364,613 
6. Mac 7500,474 
7. WebTV 1,499,613 
8. Linux 1,066,404 
9. Win 3.x 1,011,322 
10. Unix 432,309 
11.0S/2 33,441 

12. Amiga 17,274 


(69 per cent) 
(13 per cent) 
(6 percent) 
(5 per cent) 
(2 percent) 
(1 per cent) 
(0 per cent) 
(0 per cent) 
(0 per cent) 
(O per cent) 
(0 per cent) 


(0 per cent) 


Screen resolutions 
1.800x600 182,306,094 
2.1024x768 111,886,652 
3.640x480 15,244,653 
4.1280x1024 11,014,479 
5.1152x864 9,690,477 
6.Unknown 4,556,398 
7.1600x1200 1,786,493 


(54 per cent) 
(33 per cent) 
(4 per cent) 
(3 per cent) 
(2 percent) 
(1 per cent) 


(0 per cent) 
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Consectetuer adipiscing elit 


Lorem ipsum dolor sit amet, consectetuer adipiscing elt, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zenl delenit augue duis dolore te feugait nulla facilisi 


Ut wisi enim ad minim veniam, quis nostrad exerci tation ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. Duis autem vel eum inure dolor in hendrerit in vulputate velit 
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
iusto odio dignissim qui blandit praesent luptatum zal delenit augue duis dolore te feugait milla 
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat 


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facihsis at vero eros et accumsan et iusto odio dignussim qui blandit 
praesent luptatum zenl delenit augue duis dolore te feugait nulla facilisi Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enum ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nis! ut aliquip ex ea commodo consequat 


“qui blandit praesent luptaturn” 


or EESTI SEO Ee TET PS 


we've been unable to use much of what it offers us 
beyond what's been possible using the fixed 
position layers. The problem as ever has been how 
different browsers have supported the more 
sophisticated CSS commands. There are three 
main cases: 


1. Older browsers with no CSS positioning support, 
such as IE3, NN3 

These browsers don't attempt to display any of 

the positioning or layout commands. The content 
within the positioned elements flows into the 
browser window in the order that the positioned 


elements are defined in the source. This is the desired 


outcome for all older browsers and non-standard 
devices such as PDAs, screen readers and so on. 
[screenshot 16] 


Nested table design 


Turning an entire page layout into a single table is a 
crude and inefficient design. The best design control, 
not to mention the easiest construction and editing, 
is achieved using nested tables. 

To create nested tables, first of all divide the 
design up into horizontal bands. Each horizontal 
band is a separate table. Each of these tables is 
created to the simplest possible structure that will 
achieve its general purpose. Within the cells of the 
outer tables, inner tables can be used as necessary. 
The advantages of nested tables are: 

+ More logical, more modular designs 


* The ability to adjust one area of the design without 


2. Browsers with partial CSS support, such as IE4, NN4 
These browsers attempt to apply the CSS positioning 
and layout, but often fail badly. The result is a page that 
doesn't just look unformatted, but actually looks 
wrong. The page may well be unusable. More problems 


16. A simple CSS layout viewed in Netscape 3.0. No formatting, 


but perfectly useable. affecting other areas 


- Easier page design 


- Easier maintenance and reuse of code 


In some designs, it would be useful if part of the page 
scrolled content while the rest remained static: this is 
one of the traditional uses of frames. IFRAME offers 
this functionality, as well as the ability to insert 
content from another source, but its use has never 
caught on widely because it was only supported by IE 
despite being part of the HTML 4.0 specification. It is 
now supported by IE 4, 5 and 6, Netscape 6, and 
Opera 5. An interesting site that used IFRAME to good 
effect was k10k.net, a design site (now closed for 
maintenance but still online). It used the IFRAME 
container for a scrolling news element within the main 
page. It also used regular frames, but only tocreate a 
plain margin around the page. To enable users of 
Netscape 4 to access the news content in a similar 
way, the designers used server-side browser 
detection to offer an alternate page with a cropped 
ILAYER tag together with DHTML scrolling. The 
designers also created a pixel-for-pixel mirror in 
Netscape of the appearance of the IFRAME in Internet 


Explorer: a quite staggering achievement 


K10k.net is the clubhouse of Danish design 
wunderkind Toke Nygaard. With some of the subtlest 
DHTML around, it’s by connoisseurs for connoisseurs 
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are likely to be found in Netscape 4.x than in Internet 
Explorer 4, [screenshot 17]. 


3. Browsers with good CSS support, such as IE5, IE6, 
NN6, Opera 5 

These browsers are known as the DOM (W3C 
Document Object Model) compliant browsers, and 
represent considerable hope for Web designers 


interested in standards-based design. These browsers 


will support carefully written CSS designs with 
(usually) minor variations. [screenshot 18] 

The most serious problems occur because of 
differences between how IE5 for Windows renders 


certain standard CSS commands compared with IE5.5 


on Mac OS and the other DOM-compliant browsers. 
By carefully tweaking the way in which the CSS 
commands are defined fora site, it’s ultimately 
possible to work around many of the issues. This is 
highly unsatisfactory, however, because such 
workarounds are exactly what Web designers 
hoped to avoid by using CSS instead of tables 
for layout. 
For designers who understand CSS well, it’s now 
conceivable to design a site using CSS and no tables 
— even one that uses a liquid design. 


Consectetuer adipiscing. elit 


Lorem spewn dolor st amet, consectemer adipiscing 
lt, sed diam nommmny nibh ewsmod tmcidunt ut 
laoreet dolore magna aliquam erat volutpat Ut win 
enimn ad minim versa, quis nostrud exerci tation 
ullamcorper suscipit lobortis nis ut aliquip ex ea 
commodo consequat Dius autem vel eum mure 
dolor in hendrent in vulputate velit esse molesbe 
coasequat, vel dium dolore eu feugat nulla faccbss at 
wero eros et accumsan et usto odio dignissim qui 
blandit praesent luptatum ran delesst augue dias 
dolore te feugait sala faciist 


Ut ons enum ad mnum veaiam, quit nostrud exerci 
tanon ullamcorper susciptt lobortes ras! ut aliquip exc 
ea commodo consequat. Duss autem vel eum inure 
dolor in hendrest n vulputate welt esse molestie 
consequat, vellum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio digrassam qui 
blandit praesent hptatum zai delenit augue duis 
dolore te feugait ela faciks: Lorem peur dolor st 
amet_consertemer admsrine eht_sed diam 

Fe ‘Decrvert: Done 


17. Browsers with partial CSS support, such as Internet Explorer 


4, and Netscape 4.0 attempt to apply the CSS positioning and 
layout, but often fail badly. 


The tutorial 


In the first part of our layout, we're going to use simple 
tables in Dreamweaver 4.0 to recreate the design for 
the Arbuckle Ales site. We're going to save this as a 
Dreamweaver template and populate the site with 
pages based on it. Later, once we've created the 
different sorts of media, we'll add the relevant content 
to each page. In the second part, we'll try doing the 
same design again using Dreamweaver’ layers 
feature, just to see how layers-based design differs 
from table design. In the final part of the tutorial, we'll 
try doing some CSS layout using DIV tags. This offers 
more design flexibility in layout than the layers 
feature, although behind the scenes it's really the 
same technology. EEE 


Consectetuer adipiscing elit 


Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magne aliquam erat volutpat, Ut wisi 
enim ad minim veniam, auis nostrud exerci tation 
ullamcorper suscipit lobortis nist ut aliquip ex ¢a 
commode consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulls facilisis at vero eros et 
accumsan et iusto odio dignissim qui blandit praesent 
luptatum zzril delenit augue duis dolore te feugeit nulla 
focilisi 


Ut wis! enim ad minim veniam, quis nostrud exerci 
tation ullamcorper suscipt lobortis nisl ut sliquip ex ea 
commode consequat, Duis autern vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, 
vol illum dolore eu feugist nulla facilisis at vero orcs et 
‘scoursan et iusto odio dignissim qui blandit praesent 
luptatum zzril delenit sugue duis dolore te feugait nulla 
facilisi. Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diary nonummy nibh euismod 
tincidunt vt laoreet dolore magna aliquam erat 
volutpat. 


Duis autem vel sum iriure dolor in hendrerit in 


18. Internet Explorer 5.5 does a really good job of rendering 
the page, though it too has bugs compared to better 
CSS-compliant browsers. 


Three approaches to layout 


Tables, layers and CSS layout in Dreamweaver 4 


Part 1: Designing a template using tables 


The first stage is to set up the site and basic page options 


We're going to use the Arbuckles folder that 

you created in the previous tutorials as the 
local root folder of a new Dreamweaver site. In 
Dreamweaver 4.0, choose Site>New Site and call it 
Arbuckles. Using the folder button, browse to the 
Arbuckles folder and click Select. 


De 
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Copy the files in the folders from the Layout 
tutorial folder on the CD to your root folder. 
Create a new page in Dreamweaver. Choose 
Modify>Page Properties and set the title to 
Arbuckles. Set the four margin options to 0. 


Open the CSS Styles palette and click the 
Attach Style Sheet button. Browse into the 
root folder and choose styles.css. 


Part 2: Importing images 


Creating the layout table and adding images 


Insert>Table. Set it to three rows, three 
columns, and width 720. Ensure CellSpace, 
CellPad and Border are all set to 0. Highlight the 
cells in the left column, then choose Modify> 
Table>Merge Cells. Merge the centre and right cells 
in the top row too. 


Making images 
touch properly 


In order to make images touch 
properly, you need to put them 
into the cells of a table that has 
cell spacing, cell padding and 
border all set to 0, or put them 
inside closely aligned layers. 
When using table cells to align 
images, it's best to ensure that 
the images are aligned to the 
same edge of their respective 
cells: this means that as the table 
structure changes, they're more 
likely to stay aligned. Layers 
don't offer internal alignment 


Click in the last cell in the bottom row. Insert 
smalllabel.gif on the cover CD into the cell 
then align it vertical bottom and horizontal right. 


options, but you can specify this 
with CSS. 


Click in the first column, and set the width to 

W 120. Set the cells in the middle column to W 
545 and in the last to W 55. Insert bottleindica. gif 
on the cover CD into the first cell, click the TD tag in 
the tag selector at the bottom of the document and 
align its contents to vertical bottom. 


| Sirens: fea as © 


Insert ad_blank.gif on the cover CD into the 


5 | centre cell and align it right and top. Set the 
height of the centre cell to H 75. 


Click in the centre cell in the bottom row, 
then choose Insert>Image. Choose 
arbuckleslogo.gif on the cover CD. Again, click the 

TD tag in the tag selector at the bottom of the 
document and align its contents to vertical bottom. 


eet ae iad TERY 


Insert another table with three rows and four 

columns, width 720. Highlight all the cells in 
each column and set the column widths to 15, 140, 
15, and 550 respectively. > 
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Part 3: Image maps 


Creating an image map, links and making a template 


onents | ililogue | order send | ality eee | Bas, ga | 3c ou tvige 


‘octent | cage | order eae | shay woe | Bash gate | 30 duc sunt Hrige 


Insert navimagemap.gif on the cover CD into 


3 Click the banner placeholder image and choose 


the cell in the second row, second column. In the last cell in the last row, enter the text Modify>Templates>New editable region. 
Using the Circular Map Area drawing tool from the “contents | catalogue | order online | safety Name it banner. Select the content cell and set the 
Properties palette, draw an image map area over video | flash game | 3d discount fridge". Choose File Vertical Alignment to Top. Create an editable region 
each bottle top. Save as Template, and call it main. called content. Save the template and close it. 


Part 4: Templates 


Making pages from a template and updating the site 


vd Choose New from template and save it as 


contents.html. Do Save As repeatedly to create Open the template main.dwt from the Save the template and choose the option to 
3dfridge.html, flashgame.html, promo.html, Templates folder, and link each of the text links update the site. Your pages will all be updated 
order.asp, catalogue.asp. Open contents.html and and each of the map areas to the appropriate page. with the new links, and are ready for the content 
paste text from homepage. txt into the main cell. Link the logo to contents.html. elements to be added in subsequent tutorials. 


Part 5: Recreating the design 


The next stage is to add layers to a new page 


Netscape resize 
bug 


One reason layers are unpopular 
for layout is that Netscape 4.x 
has a serious bug which means 
that if you resize the browser 
window at any point, the page 
loses most of the CSS formatting 


when it redraws. To prevent this 
being seen by the user, 
Dreamweaver automatically 


inserts a tiny piece of JavaScript 


code if you use layers which 
detects whether the window size 


RGASGRRERETSERS igi 


Insert six more layers and set them to: 


has changed and triggers another 


= ————— ee — W 545 H55L120T 80 
redraw, so that the page reverts : ae : Choose Insert>Layer. Drag it to the top-left W 468 H 60 L 195 T 12 
to normal. ——__—__——— —— corner. Click in it and choose Insert>Image: W 30H 55L690T 80 
Create a new page and save it as layers. html. select bottleindica.gif on the cover CD. Experiment W 140 H 340 L 15 T 150 
Turn on the grid from View>Grid>Edit grid and _ with resizing and moving the box. Try nudging it W 545 H 340 L 180 T 150 
set it to 15px. Click the Attach Style Sheet button in using the arrow keys on the keyboard. Finally, resize W 545 H 30L 180 T 510 
the CSS Styles palette and open styles.css. it to W 120 H 122 and position it at LO T 13. The next stage is to insert content into the layers... 
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How CSS works 


CSS is not HTML, but is closely 
integrated with it.CSS 
commands can be written in 
fairly complex ways, and are able 
to automatically adapt to being 
used in different places. For 
example, links ina certain 

kind of table cell such as a 
navigation bar may be given 
different styling to links in other 
parts of the page simply by virtue 
of the fact that that's where they 
are — you don't need to manually 
apply different formatting. 
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4 | Place the images bottleindica.gif, ad_blank.gif, 
arbuckleslogo. gif, navimagemap.gif and 
smalllabel.gif on the cover CD into the appropriate 
layers as before. Copy/paste the text from 
homepage.txt into the content layer and enter the 
navigation links as before. 
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5 | Apply links as before to the map areas and to 
the text links. Using the CSS Styles palette, 
apply the style .maintext to the body copy. 
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Consectetuer adipiscing elit 


eas ust ote 
dolore ou feugat calla faciins at vero eros ef accumsan et sats odio dignisemn pa Mandi 
augue hus dolore te feugait mila faci 


Ut waa etm ad mana vensars, gus nostrud caer taton barat caper 
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G Choose View>Code and Design to open up the 
Split Code view, select the content layer by 
clicking on its edge, and amend the style attribute to 
include the following: border-left: 1px dotted black; 
padding-left: 20px; 


Part 6: Using CSS 


Applying ID styles to hand coded DIV tags to create a liquid design 


Hand coding 


Being confident enough to add 
commands to the code is a great 
asset when working with tools 
like Dreamweaver and Golive. It 
isn’t really possible to 
understand CSS properly 
without knowing some basic 
HTML, but the good news is that 
you only need to be familiar with 
a few tags to be effective. Here's 
a list of tags you should know: 
HTML, HEAD, TITLE, BODY, P, 
BR, DIV, SPAN, UL, OL, LI, 
TABLE, TR, TD, STYLE, SCRIPT, 
FORM, INPUT, SELECT, LINK, 
IMG, A, FONT 


Previewing CSS 
positioning 

You need to be careful which 
browser you use to preview CSS 
positioning: here we're using 
1E5.5 on Windows, which 
happens to have some 
unfortunate rendering bugs. This 
means that compared to the CSS 
spec, we're seeing a false view of 
the page, and it looks better than 
it ought to. IE5.5 on Mac OS, 
Netscape 6.0 and Opera 5.0 all 
show the page correctly, with 
extra space at the top. A 
designer's odyssey in fixing these 
rendering inconsistencies is 
described at [w] www.alistapart. 
com/stories/journey. 
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Open the document lorem.html in 

Dreamweaver, and choose View>Code and 
Design. Note the simple HTML structure, including 
H1 tags on the heading, two nested DIV tags 
around the body copy, and a third DIV tag around 
the last paragraph. 
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4 | Click again in the main body copy, and 
right-click (Ctrl-click on Mac) on the second 
DIV tag in the tag selector. Choose ID>content 
from the contextual menu, then preview again in a 
CSS-compliant browser. 


Open up the CSS Styles palette and click the 
Attach style sheet button. Choose liquid.css 
and click OK. Note how the page appearance 
changes. Open up liquid.css in a text editor, such as 
Windows Notepad or Simpletext to refer to as we 
work through the next steps. 


Finally, click in the last line body copy, and 

right-click (Ctrl-click on Mac) on the second 
DIV tag in the tag selector. Choose ID>menu from 
the contextual menu, then preview once more. 
Experiment with how the page behaves as you 
resize the window. 


3 | Click anywhere in the main body copy, and 


right-click (Ctrl-click on Mac) on the leftmost 
DIV tag in the tag selector. Choose ID>wrapper 
from the contextual menu, then preview in IE5, 
Opera 5 or NS6. 
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Consectetuer-adipiscing elit 


Lorem ram oor amet. consectetuer apis et 
ted hae norman nits ewsrod cada ut laoret leet 
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optanan cal delenit amgue du dolore ce fugat mila 
foche 
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vrdpatste velt esse molestie consequat, vel urs dolore 20 
feugpet aulle facie at wero ctos et accumsan nt suo dbo 
igrussen us Nandis prmesent hiptotues sl delens axgrae 
his dolore t feagat oxka facdis: Lorem sprum dolor sf 
scnet, consectetuer adkpisang elt, sed diam noeueany abby 
hismod tcidont ut inoreet dolore magna akquam erat 
voltae 
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Go We've created a standards-based liquid design 
that works well in decent browsers, and that 
degrades well for non-CSS browsers. However, it 
won't work in broken browsers like NS4. A lot more 
work has to be done to support the version 4.0 
browsers acceptably. FEES 
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Implementing 
databases 


We explore in detail how to build a Web application, and discuss 
how to ensure that the system you build does the job properly, not 
just for visitors to your site but also for the site content editors 


ver previous issues in Computer Arts and in 
Computer Arts Special, we've covered many 
of the reasons why you might want to add 
database-driven functionality to your 
Websites: ease of maintenance, the ability to present 
different views of information, and the ability to 
capture information — all of which help to make your 
site more useful and interactive. We've also discussed 
some of the different database and middleware 
technologies you can use to make it all work. 

In this feature, we're going to move beyond this and 
explore in more detail how to go about building a Web 
application, as well as discussing some of the ways 
you can ensure that the system you build does the job 
properly, not just for the visitors to your site but also for 
the site content editors. 


Starting out 


Before you start building a Web application, you may 
want to consider using an off-the-shelf solution. This 
is usually cheaper than paying someone to do the 
application for you, and is certainly easier than trying 
to build functionality into a site yourself. 

There are many shop-building solutions out there 
now, such as Actinic Catalogue, Intershop and many 
others, which offer pre-built solutions that can be 
bolted onto a site. These offer excellent value for 
money, and usually enable you to customise the 
templates so that the e-commerce bits blend properly 
into the site. These packages pay a lot of attention to 
security, and this is generally a safe way of offering 
online shopping functionality. 

However, off-the-shelf solutions usually don't offer 
all the functionality you may require. This means that 


Asimple site map makes a good starting point. Show which 
areas depend on the database: these are the bits you need to 
plan functionality for. 


you either have to forget about the missing 
functionality, or pay someone to add the missing parts 
to the system, which could end up costing you almost 
as much as if you'd done the whole lot anyway. If your 
requirements are fairly basic, off-the-shelf can be the 
most cost-effective way of achieving your goal. 


Planning the application 


Okay, so you've decided to go it alone: you have the 
budget to buy some decent software, you're going ona 
couple of training courses, and you have three months 
before the boss/client is going to start hassling you for 
results. Now we need a plan. 

Sit down with a large piece of paper, and start 
thinking about the site structure: usually, you'll be 
integrating database functionality within part of a site. 
Draw a site map showing where the database bits will 
go in the wider scheme. Describe what the functional 
bits do in broad terms. 

Next, take another bit of paper and start thinking 
about what the steps are for a typical user who's 
interacting with each functional section. What jobs are 
they going to do? Think about their first encounter with 
the system and how their actions will differ in 
subsequent encounters. The jobs the user needs to > 


Sketch out a flow chart of how different users will need to 
interact with the system. This is your road map for building the 
application. Remember, these aren't necessarily pages you're 
creating. One node here may end up split over several real 
pages, whereas other nodes may be combined into one page. 
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Draw each table with sample data in it. Look for repeated 
information or information that actually describes something 
other than the subject of the table: these cause problems. 


Split the repeated or extraneous information out into another 
table. Use shared ID values to create the relationships between 
items in the different tables. 


MySQL is a superb database management system, and is 
used by some very large sites, such as Yahoo. One 
additional attraction is that it doesn't require a Microsoft 
Web server to run on, and is completely free for most users. 
The drawback is that it lacks its own visual interface: all 
communication with the database is carried out using 
Structured Query Language (SQL). While there are a 
number of utilities by third parties that offer WYSIWYG 
capability for MySQL, most of them are still pretty horrible 
to use, and sometimes assume that you have a serious 
amount of SQL knowledge anyway. It’s essential to learn the 
basics of SQL if you're considering getting into MySQL, and 
advisable to learn it if you wish to get the best from any 
database. Here are some examples to give you an idea of 


what SQL statements look like, but you'll need to obtain a 


good reference book to get the best out of SQL and to 
perform certain operations within Dreamweaver UltraDev. 


To... 


Here, the category names have been moved out into a different 
table, with a shared field, CategoryID, showing which category a 
product belongs to. This makes the system much more robust 
and extensible. 


do will suggest the menu options and basic functional 
areas. Next, think about the sort of things the 
administrator of the site will need to do on the system. 

What you're aiming for is essentially a simple 
flowchart of interactions with a different set of tasks 
for users and administrator. This flowchart will 
ultimately guide you in planning which pages to build 
— more on that later. 


Designing the database 


The next job is to begin work on the data structures 
that are going to support the functionality outlined in 
the previous step. At this stage we're thinking about the 
information in the most abstract terms, and not in 
connection with any specific database system. If you 
need to imagine how you're going to implement what 
we design here, think about simple spreadsheets in 
Excel: database tables and spreadsheets both store 
information in rows and columns. This task requires 
accurate knowledge of the information you're going to 
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Open source software at its best is exemplified by the 


Apache Web server, PHP dynamic page technology, and 
MySQL relational database software. Together, they offer a 
platform for dynamic Websites and database publishing, a 
practical alternative to the Microsoft route, but not for the 
faint-hearted. 


SQL 
CREATE table CATEGORIES (productID INT PRIMARY KEY, categoryName TEXT) 


Insert data into table INSERT into CATEGORIES values (‘1’, ‘Beer’) 


Select certain records 
FROM products 


SELECT ProductID, ProductName 


WHERE ProductPrice > 20 
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be storing, and how different elements relate to each 
other. This is the most important bit to get right, 
because making wide scale changes to the data 
structure can be pretty challenging once the database 
is populated with information. 

Think about the different sorts of entities that will 
be described in the system. In these terms an entity is 
a user, a product, an order, a category of beer, and so 
on. Each entity will need to be described in a table of 
its own, with columns describing different attributes of 
an entity, and different entities being described on 
successive rows. Columns are often referred to as 
fields, and rows are often referred to as records. 

Again, take some paper and write it out by hand, 
one table per piece of paper. Put in a few examples for 
each table: at least three and no more than ten. Your 
next task is to look for redundant data and define 
relationships between the different entities. 

Each table in a database should describe attributes 
of just one sort of entity. If you find that you're reading 
through the columns and an attribute is actually 
describing a quality of something besides what the 
table is meant to be about, split it off into a table of 
its own. 

One of the principles of database design is to try to 
eliminate redundancy within columns: repeating the 
same information over and over is a typical example. 
Repeated information is going to cause problems for 
maintaining the database, so this too should be split 
into a table of its own. 

To show relationships between entities in different 
tables, each entity in a table is given a unique ID value, 
called the primary key. The primary key must be 
specific to an entity in the table - no two entities may 
have the same value for the primary key. The best way 
of achieving this is to create an extra column, usually 
called ID, which contains an auto-incrementing 
number. Use the value of this number in othertables 
when you wish to refer to a specific record ina 
different table. 

This is an iterative process, which means that you 
keep doing this until redundancy within each table has 
been reduced to a practical minimum. 


Choosing a database, server model 
and hosting 


It's time to think carefully about software now: you're 
going to need a database system that you can work 
with from your own computer, and also host ona 
Website. You're going to have to pick a type of 
middleware that will enable functional Web pages to 
interact with the database, and that can be hosted on 
the same site as your database. Finally, you're going to 
have to find a Web host that supports both your chosen 
technologies as well as meeting any other 
requirements you may have. 

For databases, your main choices are Microsoft 
Access, Microsoft SQL Server and MySQL. Access 
and SQL Server are options found on Windows NT or 
Windows 2000 based Web hosts. MySQL is found on 
Unix/Apache Web hosts. Don't decide on a database 
solely because it’s what your current host offers, 
although if you're really not bothered either way this 
cana useful decider: it’s easier to change ISP than it is 
to work with a technology you’re not comfortable with. 

If you're just beginning with data driven Websites, 
it's best to start out with Microsoft Access unless you 


Specifying field types in your database 


When putting information in database fields, you need to know how the database stores that 
information, Databases make a distinction between text, number, date and Boolean (true/false) 
fields, and this affects how you can use the contents of a particular field, For example, you can't 
add text characters, spaces or other punctuation to a number field 

Just as important (and even more obscure) is the fact that there are often different types of 
text fields, and different types of number fields. Ordinary text fields will be limited to a certain 


number of characters, If you try to store strings that are longer than t ber of characters 


allowed for that field, the database may silently omit the extra characters, With numbers, the 
database holds numbers that have a fractional value (floating point numbers) differently from 
whole numbers (integers). By default, Microsoft Access makes all text fields 50 characters long, 
and all number fields are set to hold only whole numbers. These defaults must be changed in 
many cases 

In Microsoft Access, the following data types should be used for different types of field 


contents. Other databases will have equivalents for most or all of them 


Contents of field 


ID value for table 


Ordinary text field 


Long text 


Dates and times 


Access Data Type 


Autonumber 


Memo 


Date/Time 


Notes 


Contains integer value: automatically incremented by one whenever a record is added to the table 


These are limited to 50 characters by default. You can change this in Access for each field, up toa maximum ¢ 


Unlimited length text field 


accepted in most date formats. Can automatically insert the current date or time on the server using Date() or 


Numbers for calculations Number (Double 


eg, prices, weights calculations 
References to Autonumber Number (Long Integer 


fields, other whole numbers 


Web links, email addre 


Boolean (True or False) values Yes/No 


know that what you're building is going to be placed 
under heavy load. Heavy load can be considered as 
either having hundreds of thousands of items per table, 
or having more than a few simultaneous users running 
database queries at the same time, or both. 

In these situations, forget Access and go straight for 
SQL Server or MySQL. If you're going the Unix route, 
you'll probably be using MySQL anyway, which means 
that what you build will be enterprise-strength right 
from the start. 

For middleware, your main choices are Active 
Server Pages, Cold Fusion, Java Server Pages and PHR 
Active Server Pages and Cold Fusion are usually found 
on Windows hosts: PHP is found on Unix/Apache 
hosts. You don't usually find Java Server Pages on 
commercial hosting; it’s really a corporate platform. 
There are two main configurations that make good 
options for beginners: ASP with Microsoft Access, and 
PHP with MySQL. 

What you should choose depends on a whole bunch 
of factors, such as available expertise, what platform 
you're on, whether you need to integrate with other 
systems later. If you don't have other issues to consider, 
then the choice really comes down to platform 
and inclination. If you’re on Windows, then you can 
sensibly consider either choice. The simplest thing to 
do is to use Access with ASP running Personal Web 
Server or IIS on your own PC. | 


fault value in the field specification 


Double precision floating point number. Can ste 
contain pr r other values resulting from calculatior 
Default setting for number fields in Acc 


are silently dropped 


This stores only whole numbers. Valu 


s after the decimal point. You need to use these for fields that will 


fter the decimal point 


Access offers a hyperlink field type, but you must avoid this if you are going to publish the database using dynamic page 


s like ASP 


technolog 


Contains the true or false value 


If you're on Mac, then there's a tendency to go forthe 
PHP/MySQL route unless you: 

a) Have a permanent Internet connection 

b) Have a Windows NT/2000 server on the local 
network configured so that you can see it from 

your Mac. 

Whichever route you choose, you need to go ahead 
and build the data structures you designed in your 
database system, and enter the same sample data so 
that you can test the databases later. 

When creating fields in the database system, you'll 
have to specify what sort of information you'll store in 
each field. 


Planning and creating functional pages 


Building your functional pages requires you to 
translate your flowchart of functionality into pages that 
you can build in your chosen middleware solution. This 
is often the hardest part to get started with, but there's 
a simple technique that you can apply to all projects to 
identify the sort of pages you'll have to build - we call 
it the five-page model. For each table in the database 
that you want to be managed through the Website, you 
may require some or all of the following pages: 

1. Search page 

This enables the user to filter down the items to just 
those they want to explore. 


2. Results list page 

Shows the filtered list of items in a concise summary 
form. Each item links to more information. 

3. Detail page 

This contains all the information for a particular item 
that’s been chosen from the results list. 

4. Update page 

This page contains the same information as the detail 
page, but it’s made available in a way that the user can 
change information. This will be an HTML form. 

5. Insert page 

This page usually consists of the same form as the 
update page, but isn't pre-filled with data. Instead, it 
enables new items to be inserted into the table. 
Some tables will not have any pages to manage them: 
their contents may be relatively unchanging. Other > 


Once your database has been designed on paper, recreate it in 
the database management system of your choice. Here are 
some of the tables in Microsoft Access. 
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Creating fields in Access is easy, but you have to set the correct 
options for each field. Remember, for each field type, there are 
further attributes that you need to pay attention to. 


The relationships between records in different tables can be 
shown diagrammatically in Access. The line joining the two 
tables actually enforces correct values being used in the 
products table. 


pages that you may require in your application include: 
- Login page 

This enables the user to sign into the site with a 
username and password 

- Logout page 

Signs out a user who is logged in 

* Delete page 

Enables the user to delete an item from a table. 
Deletion of items from tables in a relational database 
may be dangerous, so it doesn't appear as one of the 
list of five simple pages. Deletion has to be done 
carefully and with an eye to what consequent changes 
will need to be made to other records. 

+ Pages to manage shopping carts, such as add to cart, 
view cart, save cart and so on are an interesting case. 
In many applications, these don't actually interact with 
the database until the cart is saved for another 
occasion or the user wishes to proceed to the 
checkout, in which case they can be regarded as 
insert pages. It’s easy to imagine other jobs that 
individual pages could do ina Web application - 
however, with a little thought, these can usually be 
expressed in terms of the five-page model. 

For example, if you want the user to be able to sign 
up for a username and password themselves, rather 
than being assigned this information by an 
administrator, you'd need a page to enable them to do 
this. However, this page would simply be an insert 
page for the user’s table. Letting the user change their 
password is simply an update page for the user’s table. 
The five-page model is the metaphor used in the 
UltraDev documentation, training materials and 
workflow, but whether you're using this tool or not, it’s a 
great way to help you identify what pages need to be 
built to make your application. 


Paying attention to interface and testing 


When building the actual page designs for the 
functional pages, you need to pay special attention to 


Sending information between pages 


In creating a Web application, one of the biggest challenges is 


sending information from one page to another. There are 
essentially two ways of doing this: sending information via 
HTML forms, or by encoding information into links. 

Here's a typical example: you create a list of products, 
each with its own unique ID value called Product|D. You want 
the next page to use the value for the ProductID of a selected 
product to display more information about it. 


Using a form element 
The form element should be named ProductID. The value of 
the form element should be set to the value of the ProductID 
field for each product. Ina SELECT menu, it looks like this: 
<select name="ProductiID"> 
<option value="1">First Product</option> 
<option value="2">Second Product</option> 
<option value="3">Third Product</option> 
</select> 
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When the form was sent, if the second menu option was 
selected, the next page would receive the information 
“ProductID=2”. The next page would be able to use this value 


to filter a query on the database. 


Using links 
In the above example, we could use a list of links on the page 
instead of a menu. The code for this would look as follows, but 
the information would be sent in pretty much the same way to 
the next page. Notice how the name and value for ProductID 
are appended to the link after a question mark: 

<a href="details.asp?ProductID=1">First Product</a> 

<a href="details.asp?ProductID=2">Second Product</a> 

<a href="details.asp?ProductID=3">Third Product</a> 
If the second link was clicked, the next page would receive the 
information “ProductID=2”. Form contents can be sent using 
one of two methods, GET and POST. If a form is sent using the 
GET method, this is the same as if the information had been 


how easy the system is to use. Can people use it 
without requiring instructions or training? This applies 
both to the user view and the administrator view. 

It's useful to ask some typical users to test the 
working application at an early stage to see if there are 
any usability problems that may need to be fixed. 
When doing user testing, you should perform the same 
test using at least three separate participants. 

Write down a series of tasks, and watch or video 
the participant performing the task. Ask them to 
think aloud as they work — this way you can quickly 
gain a feel for how the interface is working. 

Generally, don't bother doing the same test more 
than three times: you wont find out much new 
information, and if you have more participants 
available, use them to test the next version once you 
have fixed the initial set of problems. 

It's a good idea to provide some online help screens 
as part of the application, but remember that most 
users won't read them! This means that to be 
successful, your site has to be easy and intuitive to use. 


Putting it into practice 


Having thought through how we build a Web 
application, let’s put it into practice in the Arbuckle’s 
Ales site. There’s a pre-built database in Microsoft 
Access provided on the CD accompanying 

the magazine. 

In the tutorial that follows, we're going to see how to 
use Dreamweaver UltraDev 4.0 to create list, detail, 
update and insert pages for the products table in this 
database. The pages will be called products List, 
products detail, products update, and products add. 

In the second part, we'll use some additional server 
behaviours to see how we can add shopping cart 
functions to the site. 


encoded into links. POST sends the information in a different 
way, which is more secure and can handle larger amounts of 
data. This is an area you need to be comfortable with 


regardless of which database or server technology you use. 
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An example of sending information between pages: the cutID 
value in this link determines how the next page displays. 


Building a Web application 


In this tutorial, we're adding a content management database to the Arbuckle's Ales site, 
enabling the owner to publish and maintain information about the different products 


Part 1: System set-up 


You need to view ASP pages through a Web server. We're going to set this up now... 


1 | Copy the database arbuckles.mdb from the DSN called arbucklesDSN pointing at this 
cover CD into the database folder in the 
Arbuckles site folder on your hard disk. 


Using the ODBC control panel, create a System 


database. Don't create a User or File DSN: these may 
not enable you to use the database from a Website. 


In the Personal Web Server or IIS control panel, 
create a new virtual directory called aa 
pointing at the Arbuckles site folder. 


Part 2: Setting up the site 


We'll set up U/traDev with the project folder, details of the app server and a connection to the data source 


Mac users 


Setting up UltraDev on a Mac 
system is dependent on your 
set-up and how you're going to 
access the application server. In 
the following steps, we've shown 
UltraDev working on a Windows 
2000 PC using IIS 5.0. 


In the Application Server options, choose ASP 

2.0. Set the other options to VBScript and .asp, 
and enter localhost/aa as the local server address. It 
should pick up the remote folder information from 
the local folder set up in the last step. You may need 
to change this depending on your configuration. 


1 | In Dreamweaver UltraDev 4.0, choose 
Site>New Site to bring up the Site Definition 
dialog box. Give the project a name and click the 
folder button to browse for the site folder. Choose 
the Arbuckles folder you used for the layout tutorial. 


3 Choose Modify>Connections, New>DSN. 

Choose ArbucklesDSN from the dropdown list 
and call the connection ArbucklesCONN. Click Test 
and ensure that the connection tests successfully. 
Now we're ready to make some pages. 


Part 3: Creating a results list page 


This page lists all the products in the database, and links to a page showing more detail about each one. In 
a real application with more than just a few products, we'd put a search page before the results page 


Ultradev folders 


Setting up UltraDevrequires a 
project folder set as the local root 
folder, but your pages have to be 
viewed through a Web server 
with the correct app installed. 
The Web server folder containing 
your project must be specified as 
the remote folder under the 
Application Server section of the 
Site Definition dialog, and the 
http address for viewing it must 
be entered as URL Prefix at the 
bottom of the same dialog. These 
two options must point at the 
same folder for UltraDevs Live 
Data view to function. 


@ Open catalogue.asp in U/traDev. In the Data 
Bindings palette, choose Recordset to create a 
new recordset. Name it productsRS in the simple 
view. Choose ArbucklesCONN from the Connection 
menu and choose products from the Tables menu. 


enn As be #2 


Expand the productsRS recordset in the Data 


Click in the content cell in the document, and go to 
Insert>Table. Create a table with two rows and two 
columns, width 100 per cent, other attributes at 0. 


Bindings palette to show the field placeholders. 


Drag the placeholder for productName into 

the first cell of the new table. Click to create a 
test insertion point at the end of the placeholder, 
and use the right arrow key to move into the second 
cell. Type ‘view details’ in the second cell. > 
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Part 3: Creating a results list page continued... 


Connections in 
UltraDev 


UltraDev must be able to connect 
to a data source inorder to 
create recordsets and server 
behaviours. You can use ODBC, 
OLE-DB or JDBC to make the 
data source available and then 
tell UltraDev how to find the data 
source by creating a connection 
to it. (Modify>Connections). 
Each connection is stored ina 
simple dynamic page in the 
Connections folder in the site 
root. If you need to have one 
connection setting for local 
development work, but a 
different one on the live site, all 
you have to do is edit the 
connection file onthe live site so 
it contains the new setting. This 
won't affect any of the pages you 
have built, because they all draw 
their connection information 
from that one file. 


With the cursor in one of the cells of the inner 
table, click the TR tag on the tag selector 

(at the foot of the document window) to select it. In 
the Server Behaviours palette, choose Repeat 
region. Choose all records and OK. The table row 
will be repeated for each record in the database. 


Behaviours palette and choose Go to Detail 


Page. For Detail Page, type details.asp and click OK. 
Check that Pass URL Parameter and Column are set 


to productID. This creates a customised link that 
contains the ID value of the record. 


Py Highlight the words ‘view details’ in the Server 


G to preview in a browser. Hover the mouse over 


conitents | catalogue | order oriine | safety video | flash game | 3d discount fridge 


Save the page, then press F12 on the keyboard 
each link and see how the link information in the 
browser status bar changes. 


Part 4: Creating a detail page 


This page describes the information for the product in more detail. It uses 
the ID value from the link to filter the recordset to the correct product 


Using Repeat 
Region 


Repeat Region is one of the real 
workhorses among the UltraDev 
server behaviours. It works best 
when you use it to repeat a table 
cell or table row. It can't repeat 
round corners, though, which 
means that it can't automatically 
repeat cells horizontally, 

but starts a new row after so 
many cells, However, there is a 
third party extension on the 
UltraDev Exchange 
(exchange.macromedia.com) that 
can repeat across and down in 
the manner described. When 
using a repeated region to show a 
list of items found aftera search, 
it's best to restrict it to 10 or 20 
items, and use the Recordset 
Navigation Bar and Recordset 
Navigation Status objects to 
enable the user to navigate 
through the results easily; these 
commands are inthe Insert>Live 
objects menu. 
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@ Choose File>New from template to create 

a new page based on the template Main. 
Save it as details.asp. Create a new recordset called 
productsRS as before. This time, choose 
Filter>ProductID so that the value sent from the 


previous page will be used to select a specific record. 


Click OK. 


At the end of the second line of SQL, add 

, categories. (Note the comma.) Add the text 
AND products.categoryID = categories.categoryID 
At the end of the last line. Click OK. 


py Create a table in the content cell with four 
rows and two columns, width 100 per cent. 
Type the labels Product Name, Description, Price 
and Category into the left-hand column. Insert the 
appropriate placeholders from the Data Bindings 
palette into the right-hand column, using the Insert 
button if necessary. 


Back on the page, delete the category 
placeholder and replace it with the new 
placeholder for categoryName. 


| ac tt to cL 


Turn on View>Live Data view. Note that the 
category is just shown as an ID value. We need 
to join the products and categories tables to find out 
and display the related category name. Double-click 
the name of the recordset in the Data Bindings 
palette and go to the Advanced view. 


Product info 


corennes | catstocie | order erie | satote veiw | Rach Gamma | 3d arceurt tetas 


Save the changes to Details.asp and switch 

back to the catalogue.asp page. Preview ina 
browser and check the link from each product to the 
correct information in the details page. 


Part 5: Creating an update page and an insert page 


We'll use HTML forms so that Mr Arbuckle can edit the 
details for any product and create new product entries 


Simple versus 
Advanced recordset 
dialogs 

When creating a recordset in 
UltraDev, it’s easiest to do so in 
the Simple version of the dialog: 
here, you can create a recordset 
from any single table in the 
database and filter it using a 
single parameter. If you need to 
join tables together, such as the 
products and categories tables in 
the example shown, you must do 
this in the Advanced dialog, 
where it enables you to edit the 
SQL that's needed by hand. It 
isn't possible to join tables in the 
Simple recordset dialog. 
Similarly, if you need to filter the 
recordset using two or more 
parameters, you must do this in 
the Advanced dialog. 


Hiding things 
based on login 


In order to prevent visitors to the 
site from adding new products or 
changing product details, we'd 
want to hide the options for these 
on the catalogue page. To do this, 
simply create a login page that 
refers to the user's table to check 
that a username and password 
are valid, then wrap the following 
ASP code around the part of a 
page you want to hide, eg: 


<% If 
Session(‘MM_Username”) 
<>“ Then %> 
<a href="insert.asp">add 
new product</a> <!—stuff 
you want to hide —> 
<% End If %> 


This code ensures that only users 
who have logged on to the site 
will see the option enclosed in 
the two <%%> tags. If your 

site visitors have to login, thena 
similar method using Session 
(*MM_UserAuthorization”) can 
be used. 


‘pontents | catalogue | order oniine | salety video | Hash game | 3d discount ridge 


dF] 


2 Create another new page from the template 
and save it as ‘insert.asp’. In the catalogue 
page, add the text ‘add new product’ anywhere and 
link it to the insert.asp page. 


4 | We're going to make the list menu apply to 
the relevant categoryID as a value but display 
the name of each category. In Server Behaviours, 
choose Dynamic elements>Dynamic List/Menu. 
Choose categories, Get Labels from categoryName 
and Get Values from category!D, then click OK. 


Apply the relevant placeholders from 

productsRS to the text fields on update.asp. In 
Server Behaviours, double-click Dynamic List menu 
and click the bolt icon beside Select value equal to. 
Select the categoryID field in productsRS. On the 
catalogue.asp page, add a new column to the inner 
table, type in ‘update’ and use the Go to Detail Page 
behaviour to link it to the update page. 


In the insert.asp page, insert a form tag using 


Insert>Form, then create a table in the form 
with four rows and two columns, width 100 per 
cent. Type the labels Product Name, Description, 
Price and Category into the left-hand column. In the 
right column, create three text fields (Insert>Form 
objects>Text field) beside the first three labels. 


To make the form add a record when posted, 
choose Insert Record in the Server Behaviours. 

Specify Connection: arbucklesCONN, Table: 

products, After Inserting go to: catalogue.asp. 

Check that the form elements are inserting into 

the correct column, and click OK. Save the 

insert.asp page. 
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8 | In update.asp, choose Update Record from 
the Server Behaviours palette and choose 
Connection: arbucklesCONN; Table to update: 
products; Select record from: productsR$; Unique 
Key Column: productID; After updating go to: 
details.asp. 


Insert a ‘Send’ button at the bottom of the 

table. In the Properties palette, name the text 
fields ‘productName'’, ‘productDescription’ and 
‘productPrice’. In the fourth cell insert a list menu 
called ‘categoryID' (Insert Form objects>List/Menu) 
and create a new recordset called categoriesRS. 


G Save the page as update.asp and remove the 
server behaviour ‘Insert Record’. Open 
details.asp, highlight the name of the productsRS 
recordset, and choose Copy from the Server 
Behaviours palette wing menu. In update.asp, 
choose Paste from the Server Behaviours palette 
wing menu to insert the recordset into the page. 


Preview the catalogue page in a browser, and 
try adding a new product to the database, then 
try editing the details of a product. > 
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Building a shopping cart 


In this tutorial we'll use additional server behaviours to add shopping cart functions to the site 


Part 1: Adding products to the cart 


The user adds products by clicking a link on a detail page. They can then amend the amounts in a View 
Cart page, clear the cart, continue browsing or proceed to the checkout 


Tutorial outline 


One complication is the fact that 
Dreamweaver doesn't ship with a 
shopping cart: instead, 
Macromedia promotes a third 
party solution called UltraCart, 
written by PowerClimb 

([w] www.powerclimb.com). To 
make this work reliably with 
UltraDev 4.0, you'll need a 

patch by Joseph Scavitto 

called UD4 Cart Patch 

({w] www. thechocolatestore.com 
/ultradev). We're putting both the 
extensions on the CD for your 
convenience. To start interacting 
with the cart, the user will click a 
link called ‘add to cart’ on the 
detail page created in the 
previous tutorial. The subsequent 
pages for the cart are: 
cart_view.asp; cart_empty.asp; 
cart_checkout.asp; and 
cart_thanks.asp. 


Real-world 
considerations 


Inareal project, we'd probably 
think about having the user log in 
with a unique userlD and 
password before using the 
shopping cart. This would remove 
redundancy in the orders table: 
we'd simply store the customerlD 
for each order. (In this exercise, 
we're asking users to enter their 
name and address each time to 
keep it simple.) There are also 
several ways of dealing with the 
order, but we'll just put the 
information into a database for 
now. Real-world additions would 
include online payment 
authorisation, a proper summary 
page, and email notification of 
the order to both the vendor and 
the user. 
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First, we need to install the two extensions 

to UltraDev that give us shopping cart 
functionality. On the CD, locate the file 
UC_Cart_V12_Beta2.mxp and double-click it. This 
should open up the Extension Manager and install 
the software into your copy of U/traDev. Do the 
same with UD4CartPatch.mxp. 


4 | Check that Recordset is set to productsRS and 
that Index column is set to productID. Finally, 
for ‘When done adding to the cart’, type in 

‘cart_view.asp’. Click OK to confirm your changes. 


Click in the cell below Quantity and choose 

Insert>Form Objects>Text Field. Set the name 
of the text field to Quantity, and set the width to 
four. Select the text field, click on Quantity in the 
Data Bindings field list, and click Bind at the bottom 
of the palette. Use the Format menu in the Data 
Bindings palette for each of the price placeholders to 
set them to two decimal places. 


Open details.asp. Next, we need to add the 


shopping cart behaviour: all the pages that 
relate to the cart have to have this applied with the 
same settings. In the Server Behaviours palette, 


choose UltraDev Shopping Cart>UltraDev Shopping 


Cart. Enter 10 for days before cookie expiration, 
and click OK. Add a new line beneath the table and 
type ‘add to cart’. 
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Choose File>New from template, and create a 

new page from the main template. Save it as 
‘cart_view.asp’. In the content area, add a form 
using Insert>Form. Inside the form, add a table with 
three rows and four columns. 


While the cursor is somewhere in the second 

row, click the TR tag in the tag selector at the 
bottom of the document window. From the Server 
Behaviours palette, choose UltraDev Shopping 
Cart>Repeat Cart Region. This will duplicate the 
table row for each product in the cart. 


Highlight the text you just typed, and choose 

UltraDev Shopping Cart>Add To Cart Via Link. 
We need to set the entries for each cart column. For 
ProductID, choose Recset col: productID. For 
Quantity, choose Literal: 1. For Name, choose 
Recset col: productName. For Price, choose Recset 
col: productPrice. 


' 

G In Server Behaviours, choose UltraDev 
Shopping Cart>UltraDev Shopping Cart. Enter 

10 for days before cookie expiration, and click OK. 
In the first row, type the headings Product, 
Quantity, Price each, Subtotal into the four cells. 
From the shopping cart items in the Data Bindings 
palette, drag Name into the cell below Product, 
Price below Price each, and Total below Subtotal. 
Insert Sum(total) into the very last cell. 


9 | In the third row under Quantity, insert a Form 
Object>Button. Label it ‘Update’. From the 
Server Behaviours palette, choose UltraDev 
Shopping Cart>Update cart, and tell it to go to 
cart_view.asp. When the quantity of a product is 
altered, clicking update will make that change to the 
cart. Zero quantity removes a product from the cart. 


Part 2: Clearing the cart 


Next, we'll make it possible for the user to clear the cart and start again 


How the cart works 


The shopping cart doesn't use the 
database to store info about the 
products a visitor has selected. 
Instead, their order information is 
kept in a cookie, stored by their 
own browser. When the user goes 
to the cart_view page, the page 
queries the cookie and builds the 
order information according to 
what it finds. When the user goes 
to the checkout, the Save cart to 
table behaviour runs through 
each product in the cookie info, 
inserting the information for the 
chosen cart attributes into a 
column in an order details table. 
Each order detail entry uses the 
orderID of a record in the Orders 
table to relate all the items from 
a single order. 


Below the table, type ‘continue browsing | 

empty cart | proceed to checkout’. Link the 
words ‘continue browsing’ to the catalogue.asp 
page. Highlight the words ‘empty cart’. From the 
Server Behaviours palette, choose UltraDev 
Shopping Cart>Empty cart. For Go to URL, type 
‘cart_empty.asp’ and click OK. 


From the Server Behaviours palette, choose 

UltraDev Shopping Cart>Redirect if empty, 
and enter cart_empty.asp as the redirect page. Save 
cart_view.asp. Create a new page from the main 
template, and save it as ‘cart_empty.asp’. In the 
content cell, type ‘Your cart is empty. Please 
continue browsing using the links below.’ Save 
cart_empty.asp. 


Test out the system: preview any page ina 

browser, then go to the beers catalogue, view 
the details for a beer, and click Add to cart. 
Experiment with changing the quantity value and 
the empty cart feature. If you go to view cart 
without any items, it should redirect to the empty 
page automatically. 


Part 3: Going to the checkout 


Now the real fun starts: we need to get a new OrderID from the system before inserting the new order 


Why getting the 
OrderlD is tricky 


In order to connect the items in 
the orderDetails table with their 
order in the orders table, we 
need to know what the unique ID 
for the new order will be before 
we create it. A rather interesting 
workaround for this problem is 
used by the author of the cart 
extension, where a simple table 
with one record is used to keep 
track of the next order ID value to 
be used. The checkout page 
queries this table to get the new 
number, and increments it by 
one. The number is then used as 
the primary key value of a new 
order in the orders table, and as a 
foreign key value in the 
orderDetails table, relating the 
order items to the order. This is 
an acceptable method while the 
number of concurrent users of 
the site remains low. However, it 
has potential problems for 
scaling the site to high user 
loads, because it’s theoretically 
possible for two or more users to 
query the number table 
simultaneously, so that both 
users receive the same number. 
One of them will be unable to 
place an order, because the 
database won't accept duplicate 
values for orderiD. Another 
method for getting a good ID 
value is to build a unique number 
by using an element such as the 
current time converted to a string 
combined with the Session ID 
value issued by the server. 


Ey Now we need to insert one entry for each 
product ordered into an OrderDetails table. To 
cap it off, there's a problem with one of the 
behaviours supplied for the cart, which we need to 
fix so users can place two or more orders in 
succession. In cart_view.asp, link the words ‘proceed 
to checkout’ by typing cart_checkout.asp in the Link 
field in the Properties while the text is selected. Save 
cart_view.asp, then do Save as and save it as 
cart_checkout.asp. 


When the order is placed, we need to find out 

the next orderID to use in the Orders table. 
From the Server Behaviours palette, choose 
UltraDev Shopping Cart>Get unique ID from table. 
Specify the connection, then choose Table: orderID 
and Field: orderlD. For Session var, type OrderlD 
then click OK. 


Delete the link ‘proceed to checkout’ under the 
table. Delete the text field for quantity, and 
replace it with the quantity placeholder from the 
Shopping Cart items in the Data Bindings palette. 
Click at the end of the last cell in the inner table and 
press Tab repeatedly to create several new rows. 


Click beside the button in the form, and 

choose Insert>Form Objects>Hidden field. In 
the Properties palette, name it OrderID and enter 
the following as the value: 
<%=Session(“OrderlD")%> 


In Server Behaviours, delete the Update Cart 

behaviour. Drag the update button to the last 
cell in the table, and label it ‘place order’. In the new 
rows, create two text fields named ‘Name’ and 
‘Address’. Type in labels beside them and apply any 
formatting you wish. 


Go From the Server Behaviours palette, choose 
Insert Record. Specify the connection, then 
choose Table: orders. Leave the field blank for After 
inserting, Go To’ For the Form elements, check that 
name is mapped to name, address to address, and 
orderID is mapped to orderID. Click OK.> 
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Data tables 


The tables and fields used in this 
exercise are: 
Products 
ProductID (PK, auto) 
ProductName (T) 
ProductDescription (M) 
ProductPicture(T) 
ProductPrice (N) 
CategorylD (FK, N) 
Categories 
CategorylD (PK, auto) 
CategoryName (T) 
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8 | For the uniquelD destination column, choose 
OrderID From the Server Behaviours palette, choose orderID and for UniquelD value, type: 
OrderlD (N) UltraDev Shopping Cart>Save cart to table. Session(“OrderlD”). For Go to URL, type: 

Orders Specify the connection, and set the Table menu to cart_thanks.asp. Click OK. The result of these steps 9 | Create a new page from the main template 
OrderID (N) orderDetails. For Cart column Quantity, set will be the retrieval of a new OrderlD value which and save it as cart_thanks.asp. Click in the 
Name(D Destination column to productQuantity. For Name, will be used to enter a new order in the order table content cell and type ‘Your order has been received. 
Address (D choose productName and for Price, productPrice. and a number of entries into the orderDetails table. Please use the links below to continue browsing.’ 
Date (D) 

OrderDetails 
OrderDetaillD (PK, auto) s 
ProductName(T) The page cannot be displayed 
ProductQuantity (N) 
ProductPrice (N) c pi cee ae 
OrderID (FK, N) reac ry te feng: 


Users H] = Clik oe traah batten, etry again later 
© Open the incainast home gage, and then look fur bnhy te the 
UserID (PK, auto) ee 


}] Tharsis « problem wih the pepe vou are trying to reach and it 
cannot be Gachayed 


Your order has been received. 
Please use the links below to continue browsing, 


wer"> cnbsp:</p> 


Username (T) treet fomaten Servant e"><tont sires"4">Your order has been received.</font><br> 
Password (1) the links below to continue browsing. 

Key to abbreviations: “corsets | cata onder andre | slaty wie | hash gare | dacover biso8 
PK Primary key Me —— 
FK Foreign key 10 Try out the ordering process in a browser. Test the system again after restarting your 
Auto Autonumber Ensure that the thank you page appears when Open the page cart_thanks.asp, and click at browser: this time, you should be able to place 
N Number you click the place order button. You can view the the end of the text. Choose View>Code and two or more orders consecutively and they should 
D Date contents of the database in Microsoft Access. Check Design to open the split code view, and type the both work. You can open the database in Access to 
Text the orders table and the orderDetails table. Try following: <% Session(“OrderlD")=""_%> This see the orders and order details being entered, or 
Mere placing a second order in the same session, though, removes the Session variable being used to store the you can create the pages in the next few steps and 


and it will fail. We need to fix this. orderID and fixes the problem. use them to see the details. 


Part 4: Viewing the orders 


Finally we'll create a couple of pages so that the owner can view the orders that have been placed 


Getting data 
structures right 


Getting the database structure 
right is the most difficult aspect 
of most online projects, and the 
one we've used in this example is 
also problematic, In the 
orderDetails table, the product 
ordered is referred to by name. In 
areal system, we would store the 
productiD value, not the name, 
and relate the order item record 
to the appropriate one in the 
products table. We did it the 
‘wrong way’ in the sample 


database to keep the last few 
steps simple, because it avoided 
the need for joining tables in the 
view_order_details page. 
Purists may wonder why the price 
is duplicated in the orderDetails Create a recordset listing the items in 
table when it also appears in the orderDetails, and filter it using the orderID 
products table. It means that if a Create a new page from the main template, . value. Create a table row containing the 
dhe peed off product g6eeitp and save it as cart_view_orders.asp. placeholders for the orderDetails table, and apply 
betwiden écustonior ordering t Create a new recordset listing the orders in the PH Highlight the date placeholder and from the repeat region to it. Finally, create a link from the 
and the order being fulfilled, the orders table. Create a table with two rows and two Server Behaviours palette, choose Go to detail catalogue page to the cart_view_orders.asp page. 
cuitarnerishlliie argo tis columns, and insert placeholders for order ID, Name page. Type cart_view_details.asp as the destination That's all we have space to cover here: try it 
ongiAl pts heehee and Date. Use repeat region on the table row to list page. Create a new page from the main template, out, and think what additions or changes you 

all the records. and save it as cart_view_orders.asp. would make. FEES 
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“InDesign 2: DTP without limits” 

Billing the release of InDesign 2.0 as offering 
“layout without limits; Adobe has included 
a wide range of tools aimed at DTP 
professionals. “Performance has been an issue 
according to our users,” said Priscilla Knoble... 
"We've set new standards in performance, 
with speed gains across the board.” 


Digit, November 2001. 


Adobe’ 
InDesign’ 2.0 


What the press are saying ... 


“InDesign 2.0 arrives” 

Adobe is preparing to roll out version 2.0 
to improve its status as a viable and 
economical choice for design professionals, 
who can expect a host of new features plus 
further integration with Adobe's major design 
packages, Photoshop and Illustrator. 
computerarts.co.uk, September 2001. 


“InDesign sets the pace” 

Perhaps the most striking thing about Adobe's 
development of InDesign is how in a short 
period of time it has matched and even 
surpassed the feature selection of its rival. 


macuser.co.uk, September 2001. 


For more information visit www.adobe.co.uk/indesign and contact your nearest Publishing Reseller 


ANY 


Adobe 


everywhere 
you look~ 


below to arrange a product demonstration. 
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© 2002 Adobe Systems Incorporated. Adobe, the Adobe logo, tagline ‘Everywhere you look’ and InDesign are either registered trademarks or trademarks of 
Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners. All rights reserved. 
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Animating the Web 


How to enliven your site with a touch of animation, without 


driving your visitors crazy 


artoons, games, navigation, rollovers, 
splash screens - in whatever form they 
appear, the Web is now bursting with 
eye-catching, hit-boosting and hugely 
entertaining animations. 

Although animation itself isn't a new phenomenon, 
it's been a significant part of the media for many years, 
on television, at the cinema and even in children's 
flip-books. The Web is just one more platform where 
animation has found its place, albeit a controversial 
one. But while usability gurus warn of the pitfalls of 
plug-ins, large downloads and unnecessary 
distractions, it’s clear from the prevalence of 
animation on the Net that Web designers are adamant 
that a striking intro, movie or game will add to the 
value of a site and encourage users to return. 

A quick browse on the Web will reveal that 
animation comes ina variety of guises, from simple 
banner advertising and watch-only cartoons, to 
swirling navigation and interactive games. The moving 
image can communicate a message faster than the 
written word and on the Web, where text-heavy sites 
are becoming fewer, it seems to be working. 

Cartoons come directly from television culture, 
they can take a considerable amount of time and effort 
to create, from concept and storyboards to illustration 
and animation. On the Web, most cartoons are ona 
relatively small scale though some can reach epic 
lengths with numerous episodes. But they have to be 
worth the time spent on them: if cartoons are 
something you're considering, make sure they suit the 
style of the site, enrich the content and support the 
purpose of the site. 

Bite-size pieces of animation, like banners, splash 
screens and menus are less time-consuming, however 
they still require a significant amount of planning to 
suit their environment and attract the right users. 


Star Dude quality 


What makes a good animation? Some Websites have 
attracted huge followings purely because of their 
animated content - witness the success of cult series 


and Jedi-parody, Star Dudes ([w] www.dudestudios. 
com), the ingenious rapping presidents at Jib Jab 

([w] www.jibjab.com) and the classic hamster- 
microwavers at Joe Cartoon ([w] www.joecartoon. 
com). And it isn't just movies that carry a site to Web 
stardom - check out the dynamic navigation at Muppet 
World ([w] www.muppetworld.com), the intro at 
Rockstar Games ([w] www.rockstargames.com) and 
the games at Jamba ([w] www,jamba.co.uk). 

It’s also increasingly clear that the more the theme 
orcontent of the site is focused on younger 
generations of users, the more likely there is to be a 
heavy use of animated material, more commonly Flash 
- see Popworld ([w] www.popworld.com) or Posh 
Spice's site at ([w] www.victoriabeckham.mu) 
for examples. 

Ina similar vein, few new media design 
agencies will be seen without their own styles of 
animated navigation on display on the Web - visit 
the site belonging to German-based Moccu 
([w] www.moccu.com) with its graphical invitation to 
explore or US agency 8edge.com’s stunning intro 
([w] www.8edge.com). 

Whatever the context, Web animation has more 
than proved its right to exist and to be an integral part 
of the Web. 


What's the point? 


An animation must have a reason to be there. A 
straightforward and well-greased argument it may be, 
but there are still thousands of unplanned and 
pointless kilobytes taking up valuable Web space. Why 
do people visit a site - are they there to be entertained 
orto get facts? 

Splash intros are suited to entertainment or 
design-orientated sites but informative or 
e-commerce sites shouldn't necessarily need the bells 
and whistles of animation. “I get annoyed by retail sites 
for example that have loads of pop-up windows of 
boring animation,” says Andy Wyatt from Fictitious 
Egg, who leads the animation tutorial on building a 
splash intro (starting on page 51). “Text moving across 
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JibJab is a fully fledged animation studio with its own pet site featuring some hopelessly irreverent but excellent sequences, including 


the rapping Presidents. 


the screen and dissolving into... hey another piece of 
text, is neither inspiring nor entertaining.” 

Andy sees splash screens in the same way as a title 
sequence, as in the beginning of a TV show. “If the site 
is about gardening, then have a quirky sequence about 
gardening. It should act as an intro aimed at the target 
audience: in other words, avoid flashing images with a 
soundtrack by Limp Bizkit.” 

Fictitious Egg, whose cartoons can be seen at 
[w] www.eggtoons.com, also produces work for 
television where techniques have already been 
established and content is the key to a successful 
production. Andy takes this attitude to the Web: 
“Coming from an animation background, we approach 


Victoria Beckham, or more specifically, her Web designers, know exactly how to appeal to younger Net users. Bright colours, 


innovative navigation and a good range of features. 


Web animation in a more traditional way, | like to 
entertain or tell a story or make people laugh. We 
aren't in it for the stunning design or fancy 
programming.” And it’s good philosophy to adhere to - 
without a story or intriguing interactive element to 

| carrya piece, there's a risk that users will wander 

| away without taking it in, enjoying it or passing it on 

to their friends. 


Flash bang boom 


The majority of Web users, save a few die-hards, 

have accepted the role of plug-ins in experiencing 
high-quality, dynamic content on the Net. On its 
Website, Macromedia claims that 94.7 per cent of 
Web users now have the Flash Player plug-in installed 
on their machines. Most programs suitable for Web 
animation will export the SWF file format, including 
Flash, Toon Boom Studio, LiveMotion 

and SWiSH. 

To avoid such plug-ins would mean turning to 
other means such as HTML and Java as the animation 
tools. Check out the legendary Sodaplay site at 
[w] www.sodaplay.com, a superb, interactive site that 
has avoided the SWF route entirely. 


More like a world than a Website, German multimedia design 
house, Moccu, has an original and well-constructed site with 
great use of sound. 


But when it comes to the software necessary to create 
good animation, one package stands out as the Web 
designers choice — Macromedia Flash. Does it really 
rule? “Totally. There is no substitute,” says Jim 
McNiven at Kerb, the agency whose Flash work is so 
extensive it has now produced Flash content for the 
television. “And the Flash Player has such a huge 
penetration these days, there's less need to worry that 
people can't access a site.” 

“| don't know what people are talking about when 
they say lo-bandwidth or hi-bandwidth sites. If your 
Flash work is done properly, there is no reason it 
should be bigger than some HTML pages.” Flash’s 
pre-loading and streaming functions can greatly 
reduce any wait that could occur. 

While Flash 5 has a huge following in the 
multimedia industry, more and more designers are 
also using dedicated packages such as Toon Boom 
Studio for creating traditional non-interactive Web 
animations. As the smaller sister of USAnimation, the 
professional package used by major film studios for 
fully animated movies, Toom Booms tools and 
features are well suited for use on the Internet. 

“Tools like TBS and Flash, and all other graphic 
manipulation software are really suited for small scale 
animation for Web pages presentation and user 
interface goodies - animated buttons and so on,” says 
Max Lincourt from Toon Boom. While TBS can be used 
to create good quality Web movies, exporting the SWF 
files to software such as Flash, LiveMotion or SWiSH 
will enable the animator to add interactive elements. 


Keep it lean 


However, the Net, as it exists for the majority of users, 
still isn't the ideal medium for animation. Excessively 
large downloads are a turn-off for visitors. 

“The problem with the Web, nowadays, is that it’s 
still too slow: and for animations, either streamed or 
downloadable, the user needs to wait,” says Max. “The 
more detailed the animation, the longer it takes to 
download, or the frame rate will be slow.” 

Long splash screens without the necessary ‘skip 
intro’ button are likely to put off users before they even 
get to the main content. By all means, show off your 
skills, but keep it brief. UK design agency Kerb has 
kept its site’s intro to a matter of seconds to establish 
its logo before heading into the main menu. The result 
is effective, hard hitting and doesnt consume alla 
user's bandwidth. 

In terms of Web movies and cartoons, Web 
animators usually divide their movies into manageable 


portfolio 


Short, sharp intro and cool navigation in the shape of anice 
cream. Kerb applies the rules of the Web — keep it attractive, 
fast, downloadable and accessible — to its own site. 


TEAMcHmAn 


The French designers whose creations add a little ooh-la-la to the Web 


Paris-based multimedia production 
house, TEAMcHmAn, has a curious 
range of projects in its superb portfolio 
of Web work, ranging from the 
navigable comic, 777run 

([w] www.run777Zcom), to the cute 
world of Banja, now in its tenth 
episode ([w] www.banja.com). 

Despite the lack of frags and 
blood, online game Banja has proved 
a worldwide success story. The 
award-winning animation is a series of 
interactive episodes developed using 
acombination of Flash, Illustrator and 
3ds max. A proprietary game engine 


was built to co-ordinate camera 


Already an Internet classic, animated series Banjais 


destined for television, 3D and more. 


angles and motion. Players follow the 
main character, Banja the Rasta, as he 
builds relationships and explores 
environments that involve some 
complex animation techniques. 

Tony Derbomez, Artistic Director, 
and Frederic Gay, Flash Master at 
Banja, told us their thoughts about 
Web animation. “It's not a new art, but 
the interactive side of the Web allows 
much more freedom. Animation does 
enrich the Web, as long it supports a 
strong concept and navigation, a state 
of mind.” 

When describing how they work 


with their animations, Frederic had this 


to say, “The designer uses graphical 
codes and a well-defined space to 
make the viewer's eyes stop on 

some specific objects.” Their preferred 
tool is, unsurprisingly, Flash. “It's 

the best Web animation tool,” says 
Tony but some sites in DHTML or 
Java, have surprised us with their 
perfect animations.” 

TEAMcHmAn is also responsible 
for a number of experimental projects 
for Flash Forward 2001 which can 
be witnessed at the explosive 
[w] www.vectorlounge.com. Check out 
TEAMcHmAnr's own Website at 


[w] www.teamchman.com 


Check out the links on the cHmAn site for a taste of its 


designs. Click refresh for a different view every time. 


chunks for easy download. This also means that 
uncompleted efforts can be showcased piece by 
piece. A successful online animation will even 
generate anticipation for the next instalment. Shaving 
the kilobytes off each image as you go makes a huge 
difference to the final sequence. For beginners, 
drawing as few separate shapes and images as 
possible will make it easier to manage the files and 
keep size to a minimum. A good animation package, 
such as Flash, will enable you to optimise images > 


The site for Toon Boom Studio features a gallery of work, a 
community for users and more information on what you can do 
with the Web animation package. 
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at every stage. Banners, animated GIFs and rollovers 
can be kept to a minimum by optimising each image as 
the file is constructed. 


Sounding off 


The soundtrack to a splash screen, game or movie can 
be as effective as the graphics. Adding noises to the 
buttons on a menu bar, or dialogue to a cartoon can 
enhance the user experience. Banner adverts with 
sound, however, are to be avoided as they detract from 
the site. Incorporating audio into animations can be a 
time-consuming process, but one which has been 
steadily made easier by the more recent versions of 
Web graphics software. Although products like Flash 5 
aren't full sound editors they have good controls for 
adjusting sound levels. “The sound features in Flash 
are awesome,” says Jim. “There's so much flexibility.” 

However, sound file sizes can weigh heavily on an 
animated sequence, especially if the SWF files are 
exported in stereo, doubling the size. “I'd recommend 
using mono sound for the Web,” says Sermad Buni, 
also at Kerb. “By all means test it out, but mono will 
save you space and still sound great.” Setting a sound 
to stream or loop also saves downloading times. 


While some experts recommend that beginners don't 
use dialogue but a sequence of music as soundtrack to 
an animation to avoid lip-syncing, Sermad believes 
there's little difference. “It’s incredibly easy to set 
sounds to youranimation. The timeline in Flash will 
lock sound files to image files to ensure that it doesnt 
go out of sync.” 

If you're starting out in animation, then experiment 
with styles and effects before getting to work on your 
creation. A lot of time can be wasted on details that 
only last a fraction of a second or get edited out. “A 
successful animation should always have a great story 
and nice drawings. It doesn't need to be funny or even 
beautiful,” concludes Max Lincourt from Toon Boom. 


The tutorial 


To get started on animating to your site, experiment 
with a splash screen. The following tutorial will create 
a dynamic and simple intro to greet visitors and 
enhance the quality of the site’s content. EEE 


") — Turnto the Buyer's Guide on page 94 or visit [w] www.computerarts. 
|] co.uk/reviews for more details on the software mentioned 
in this feature 


Gawp and wonder at some of the best and most innovative uses of animation on the Web 


Ninjai 

[Ww] www.ninjai.com 

This spell-binding tale of a young ninja warrior is pretty 
much an inspiration to all budding Web animators. The 
cartoon has a fantastic plot, plenty of action, great use of 
colourand is a quality display of animation skills. Although 
the team has recently run into financing difficulties, check 
out the site for the trailer and more details on how to view the 
stunning episodes. 


Feric 

{w] www eric.com 

The portfolio site for Hawaii-based designer Eric Feng makes 
for interesting exploration. In the Flash gallery, check out his 


superb array of subtle but strange, moving illustrations made 
up of gear components. Eric uses Flash, After Effects and 
Iltustratorand Photoshop to create the effects. 
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Crystal racer 

[w] http://crystalracerde 

This site devoted to the Crystal Racer movie and game isan 
example of what Flash was made for, The movie sets the 
scene of a wandering skater who comes across a sci-fi 
skateboard and leads perfectly into the well-designed and 
entertaining game. The whole thing was designed by German 
agency neteye ([w] www.neteye.de) 


Fiallfil 

[w] wwwejallfil.com 

It's not a new toy but it’s one of the best there is and has 
expanded since the original dancing cow sequences to Tai 
Chi and Aerobics: Swedish designers farfar ((w] www. 
farfarse) came up with this ingenious site for a brand of 
yoghurt. The interactive Shockwave animation was created 
using a combination of stop-motion DV footage and Director. 


MOMA 

[w] www.moma.org/whatisaprint/flash.html 

This site forthe Museum of Modern Art in New York won the 
award for Best Navigation at the Flash Forward Festival 2001. 
This section of the site forthe ‘What is a print?’ exhibition 
displays a superb interactive menu with excellent use of 
colour schemes. Featuring rollovers and animated diagrams 
ina highly original way, the site, designed entirely in Flash, is 
accessible online and via interactive kiosks at the museum. 


StudioMagic 

[w] www.studiomagic.com 

Artist Victor Rojas has created an extremely smooth and 
attractive site to house examples of his illustrative work. 
He's not only animated some of his work but created 

an interestingly interactive navigation system. Not bad 
for an illustrator. 


‘Screenprinting Ie ¥ form of e¥enciting. Ourng the 
19308, a number of American amets began 


Creating a splash animation 


Create a splash intro for the Arbuckle's site using Flash and our step-by-step guide 


Part 1: The design stage 


Like any creative exercise, the first task is to come up with an idea 
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From your initial roughs, design your 


@ Many creatives have different methods of animation ideas on paper. We may live in a By in traditional animation, each scene is 
brainstorming, but one way is to just doodle high tech age, but pencil and paper is still the best meticulously planned out before any 
ona large piece of paper, writing down words, way to put your ideas into shape. Designing animation commences: this shouldn't be any 
drawing scribbles — in fact anything that comes to animation in a computer won't release your true different with Flash. Think through how your 
your head. potential, because it tends to be too clinical. animation is going to work. 


Part 2: The artwork 
Having planned all the animation, it is time to create your artwork 


In a word 


If you are stuck for ideas when 
given a brief, try word 
association or looking through a 
thesaurus to trigger off more 
lateral ideas. Try selecting key 
words from the product, in this 
case IMPORTER, FINE, WORLD 
are all words used in the 
Arbuckle’s Ales strap line. Try to 
think what images are conjured 


up related to these words. The truck animation is made up of three 
In Flash it is much easier to animate using separate symbols. First animate the rotating 
This could be created in Flash itself, in another symbols than objects. You can convert all your wheels and create a symbol, then animate some 
graphics programme or scanned in from artwork to symbols by selecting your artwork then exhaust smoke and convert that to a symbol. 
drawings created. For this example, we have used going to Insert>Convert to Symbol (or F8). A Make a new empty symbol, and drag the 
both imported artwork and images created in Flash. _ well-ordered library of symbols should be built up, artwork elements (the main truck, the wheels and 
All the elements needed for your animation should with all the required elements of animation the smoke) into the drawing window and compose 
be prepared, and imported into your Flash movie. catalogued and named all in separate folders. the animation. See splash.fla on the CD. 
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— — bt 6 | Once you have created a circular piece of 

4 | Animated clips such as the exhaust smoke will To create the illusion of a road speeding past artwork: convert it to a symbol, ensuring the 
loop when dragged into another symbol or the behind the truck, an interesting effect can be centre point is centred to the artwork. Then drag the 

drawing window. These can be made as either achieved by creating a large circular shape, which symbol into the drawing window, create two 
Movie Clips or left as Graphic symbols. If you keep then revolves at speed behind the truck. It can keyframes either end of the rotation, and create a 
the behaviour as a Graphic then it will play in rotate infinitely, giving the illusion of a long and motion tween. In the instance window, tick the 
perfect synch with the other animation. neverending road. Rotate function. > 
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Themes 


Remember who you're aiming 
your animation at. If the site is 
aimed at kids then there is no 
point in concentrating on 
sophisticated or violent themes. 
This site is aimed at the beer 
buying public, who are obviously 
over 18, mostly male, and who 


Tmt 
1 


i 


aren 
rift 


probably have a reasonable 
disposable income. 


For the mountains and sky in the background, 
we've created a long piece of artwork, 

and coloured the mountains and sky using a 

multi-coloured linear gradient (find in the Panels/Fill 

menu). This gives the effect of the sky and 

mountains changing colour over time and distance. 


—- 


window, and compose so the start (left side) of 
the background is at the desired point at the 
beginning of the sequence. Make a keyfame (F6) at 
the end of the sequence, and move the background 
to the far right. Create a motion tween. 


Drag the background symbol into the drawing 


For the characters that get run over by Mr 
| 9 | Arbuckle, we've created the artwork elements 
directly in Flash. Each element (head, arms and so 
on) was created, composed in a symbol and 
animated. The centre point of each symbol is the 
anchor point around which the animation moves. 


Part 3: The composition 


The separate pieces of animation can be brought together and composited in the main scene window 


3 [a Bere >} 


Flash 4 and 5 


Flash 5 doesn't particularly lend 
itself to animation, with an 
interface that is more conducive 
to interactive design. Animation 
is far easier to create in the old 
Flash 4 drawing style. You can 


Chane the biter face ot Fash to Planning the elements beforehand made the 


animation of each character much easier. It 
also helps that they're easily accessed from the 
library. This is a very simple animation using just a 
few elements. For more ambitious animation, a 
larger library of more varied artwork can be created. 


replicate Flash 4 by going to 
Edit>Preferences and ticking the 
two Flash 4 Preference boxes. If 
you do a lot of animation, this 

is recommended. 
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py We'll bring all the separate pieces of animation 

together and composite them in the main 
scene window. Get into the habit of labelling each 
layer, and locking it when done. 


Ey Composition is far simpler when each 
animation sequence is constructed as a symbol. 
Adjustments in scale to each character, for example, 
can be made to just one object as opposed to 
selecting multiple frames. 


Part 4: Testing 


Test the movie at intervals, and make adjustments depending on what the animation is intended for 


Making adjustments isn’t such an issue for a 

site with predominately broadband content, 
but for a dial-up site, a splash sequence should load 
or stream as quickly as possible. 
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By Some simple sound effects can add humour to 
the animation. Sounds should be edited as 
short WAVs or AlFs, and imported (File>Import) into 
the Library. Long pieces of music or ambience will 
increase the file size so avoid. 


3 | Finally after testing, tweaking, and running the 
animation on machines that may be a bit 
slower than your own, it can be published: vary the 
output settings to get the optimum quality/file 

size compromise. 


Part 5: Animated GIF banner 


Flash is a perfectly good tool for creating animated GIFs. See banner1.fla on the CD 


For the Arbuckle’s site we want to have all the 
animation themed, so we're using Flash to 
create the GIFs and can use the same artwork as in 
the splash. Make a new movie (463x60 pixels in the 
Properties) and go to File>Open as Library. 


Animate your sequence as you would any 
other Flash animation, bearing in mind that 
the movement needs to be kept simple for a GIF 
animation, and repetitive. GIFs will loop over and 
over, so the animation needs to work as a loop. 


py When you are done, go to File>Export Movie 
and tick on the Animated GIF file format. This 
exports the animation as an animated GIF sequence. 
Remember that sounds can be attached to GIFs if 
required, but this increases the download time. 


Part 6: A guide to animating the Arbuckles GIFs 


Try creating a GIF yourself using the splash library. See banner2.fla on the CD... 


Fonts 


When using a fancy font in your 
Flash animation, remember that 
unless the viewer has that font 
installed on their machine, the 
Flash Player will replace the font 
with the system default. It is 
sometimes worth converting text 
into vectors (Modify>Break 
Apart) so Flash sees the font as 
artwork. This uses a bit more 
memory but only marginally so. 
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In this GIF, the lorry bashes into the Arbuckle 
logo and squashes a character. We made 

the animation as punchy as possible using the 

symbols from the library to animate the lorry frame 

by frame. Use a combination of tweening and 

keyframe animation. 


Open a new movie, modifying the size in the 
Movie Properties box. GIFs are normally in the 
banner style, but you see more and more at varying 
sizes. Then open the main library (File>Open as 
library>Splash) to reuse the artwork from the splash. 


o For added effect, we've drawn some extra baci! 
blood on a new layer, which splats out as the 

character gets crushed. As a tip when animating If you are using text, which is normal for GIF 
Frame by Frame, use the < and > keys to scroll m animated ads, then make sure it is readable at 
frame by frame, leaving your hand free to draw the final size. Think of the banner ad as an online 
and animate. billboard, and any text should jump out. 


As the logo shifts to the right of the window, 

m® it squashes the character. Create some simple 
animation using the Scale tool to squash the 
animation as the logo pins the character against 
the wall. 


When you are happy, create a GIF by going to 

@ File>Export Movie and select the Animated 
GIF option. Try the variables to get the optimum 
quality and file size. The GIF animation can then be 
tested in a browser and will work without the need 
for any plug-in. EEE 
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As dotcom’s pop by the hour, sites hosting motion masterpieces are 
rapidly becoming more popular - but what do you have to know to 
get your streaming video on the Internet? 


espite broadband access spreading at a 

snail’s pace in the UK, there is stilla 

massive appetite for streamed Web 

content. The future of the Internet will be 
stream-based as demand for audio and visual services 
like AtomFilms increase. Bandwidth considerations 
will no longer stifle the quality and duration of creative 
content. Already, even modem connections attached 
to a good quality ISP will enable you, with a little 
patience, to view streamed content relatively quickly. 
The reign of the video postage stamp is over. 

Even though the amount of streamed content is 
steadily rising, the streamed content industry is still 
incredibly small compared to other forms of 
distributed Web content. Fortunately, Web streaming, 
even a year on after a lot of the unfulfilled hype, is still 
one growth area of the Internet which the public, 
programmers, advertisers, small companies, large 
corporations and the rest, are still upbeat about. 

Thanks to incredible leaps in software and 
hardware technologies and price ranges over the past 
few years, notably in the last twelve months, video 
editing, effects and publishing to the Internet are now 
a viable option even for individual creatives. A few 
well-chosen Web searches will unearth a good range 
of freeware and shareware which you can use to put 
your streamed content onto the Internet without 
needing to take out a new mortgage. 

Of course, every new publishing medium presents 
digital professionals with yet another learning curve, 
but thankfully the concepts behind Web streaming, 
servers, formats and CODECs are relatively 
straightforward. At a basic level, peripheral knowledge 
alone will be enough to see your proud performances 
held up to worldwide scrutiny on the Internet. 


Webstreaming basics 


There is a common sense workflow to most 
streamed content: 


1: Capture footage from digital or analogue source 

2: Edit using hardware or software systems 

3: Compress footage using a software CODEC 
(Compressor — Decompressor) 

4: Convert compressed footage to a streaming format 
5: Embed your work into your HTML Web page 

and publish 


Extra steps can often be added as clients need to be 
consulted, alterations made and storyboard changes 
added: but these five steps are what you need to put 
coherent streamed content onto the Internet. After this 
basic workflow is understood, there are several 
specific areas which need to be tackled to enable the 
above steps to be made quickly and easily. 

The Internet is a worldwide medium, not just 
country-based. This means that size, while not the 
most important technical consideration, is definitely 
the most important overall consideration. After size, 
comes your stream format — you can encode and 
compress your footage in a variety of ways and still 
convert MPEG compressed footage to a QuickTime 
stream in this phase, but which format to choose? How 
will it affect your audience? 

A factor closely tied to this one is Web stream 
hosting — there are different types of server and server 
package which will either publish or scupper your 
streaming dreams, depending on which format you're 
publishing your work on. After all, these areas have 
been tackled, you will know what it takes to prepare 
your footage, get the right host, export to the right 
format and get your content ready for whatever online 
venture you are pursuing. 


Streaming formats 


There are many streaming formats, but there are three 
main ones that you will realistically come close to ona 
regular basis. The formats may be familiar, but the way 
they stream your content is very different. Also, very > 


Web Design 


Cleanerwill, after your NLE software, 
be your first step towards professional 
Web streaming. No other piece of 
software has: 1, such a large range of 
supported CODECs. 2, such a large 
tange of options for optimising your 
Web content. 3, the level of quality 
and amount of supported formats. 
Anyone involved with DV editing or 
Web streaming should have a copy. 
Users of Adobe's excellent Premiere 6 
will no doubt benefit from the free, 
light version of Cleaner 5, Cleaner EZ 
which comes bundled with it. This 
supports all options for AVI and MOV 
files, but not for MPEG footage. It also 
lacks some of the fine-tuning options 
for limiting data rate. 


Web Design 


importantly, you don't just require a Web browser to 
play streamed content — you also need at least one 
software application which is capable of decoding the 
streamed footage into a recognisable audio visual 
format. For example, a Mac user running QuickTime 5 
will be able to view streamed AVI (audio video 
interleave) files which have been created ona PC and 
streamed on a Windows NT Streaming server. 

However, the same Mac user may not be able to 
view a RealMedia stream without an extra plug-in. 
Fortunately, the latest versions of the three main media 
players contain the ability to play footage, which was 
at one time exclusive to its relevant player. 


RealMedia streaming format 


The RealMedia Player, despite being third party and 
not often installed as standard on either PCs or 
Macintosh-based computers, still finds its way onto a 
good proportion of computers which have been owned 
for more than six months. 

RealMedia streamed footage can be embedded 
directly into the Web page or made to pop up inside a 
floating RealPlayer. Many popular packages, such as 
Premiere and Speed Razor can compress to this 
format. The actual range of CODECs supported by the 
RealPlayer are excellent, and the quality of the 
footage and speed of download is exceptional due to a 
number of bespoke servers and server solutions 
coming from real specifically for streamed content. 

[w] www.real.com is a great stop off point, 
containing interactive presentations about Web 
streaming in general and what makes Real so useful 
for streaming. 

On the down side, a lot of people don't appreciate 
the bulky, gaudy console which comes along with 
RealPlayer when viewing streamed content that isn't 
embedded into.a Web page, nor the way it seems to 
completely take over your computer and video options 
when it is installed. 
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Atomfilms ([w] www.atomfilms.com) represents the first step 
towards the Website of the future. There's masses of excellent 
content covering all genres and the Aardman team in the 
background. With a little luck, broader bands will lead to more 
sites like this in the future. 


QuickTime streaming format 

One of the most popular formats, the MOV file, 

has come of age. Now in its latest incarnation, 
QuickTime 5, code internally published and 
embedded within the MOV means that the QuickTime 
Player can automatically detect how it should display 
the footage file. QuickTime supports a massive 
amount of CODECs for squeezing the file size from 
footage, including some famous compressors such as 
Sorenson, which offers excellent quality compared to 
file size and is particularly suitable for streamed 
content. QuickTime is supported by RealPlayer and 
the Windows Media Player, making it a good format for 
reaching the maximum possible audience. 


Windows Media 


This format is played, as standard, through the 
Windows Media Player, and is the most widely used 
format in the world. Microsoft announced over a year 
ago that it will no longer be supporting the AVI file 
format, instead it’s looking forward to future streaming 
and general audio visual technology, like the ASF. 
However, the AVI format is the most widely used for 
general work, let alone streaming, and almost every 
piece of DV software enables you to work with and 
view this format, making Microsoft's announcement 
somewhat surprising. 

The AVI streamed format is excellent as standard 
Win2K servers and WinNT servers have the Microsoft 
Streaming Server attached, which enables the server 
technician to publish streamed content and have it 
distributed at even data rates throughout the process 
and maximise speed to access the files. The technician 
is also able to control of amount of users allowed to 
access a stream at any one time, prevent server drain, 
support resume (in case your connection gets 
interrupted while downloading) and much more. The 
sin is that a lot of hosting companies are thus running 
streaming servers and are blissfully unaware they 
could be hosting streamed content. 

The QuickTime Player can have fairly major 
problems reading AVI streamed footage, because of 
the fact that a larger range of CODECs are installed as 
standard on Windows-based machines and servers, 
than come with the standard QuickTime release ona 
Mac. This means that the best format for you to use 
would be the QuickTime MOV, because this ensures 
(overall) minimal discrepancies with your audiences 


HTTP format 


Most of the Web content you see streamed comes in 
the HTTP format and is transferred via the Hypertext 
Transfer Protocol. This method includes data 


correction, checking that all packets which make the 


stream are sent. UDP stands for User Datagram 


Protocol and simply pushes the content at the users 
as fast as possible with no checks for all packets 
being sent. This makes UDP suitable for direct 
playback, when your audience has a fast Web 
connection, and HTTP suitable when you want 
everything played back with no faults, and there is no 
fast server or connection available. It is likely that 
UDP will be another of the floating protocols, which is 
never realistically used due to the popularity and 
relative ease of use of the HTTP protocol. 


computers, both Windows and Mac which will form 
the bulk of your audience. 


Other formats 


The best two alternative formats are MPEG-1 
encoding, a lossly compression technique by the 
Motion Picture Experts Group specifically for the 
Internet. This is supported by RealPlayer, WMP and 
QuickTime, but the creation is normally by Hardware 
or expensive software systems, and is thus not nearly 
as widespread as it is on CD-ROMs. 

Another great one, which is supported by Microsoft 
in the wake of the AVI, is the ASF file, which employs 
selective compression to give optimal file size along 
with detail. 


Streaming methods 


Just as there are different streaming formats, there are 
different methods of deploying the formats. There are 
four basic methods of getting streamed content from 
your Web page and on to your audience's computer. 


Real-time streaming 
As its name suggestsu can see this type of stream in 
real-time — none of those horrible downloading and 


Apple take on Microsoft in the media-playing arena by 
snapping up exclusive trailers to films as vast as the new Star 
Wars epic. This has led to much publicity for the QuickTime 
Player in recent times. 


juttering sequences as the buffer tries to fill up again. 
This is the holy grail of streaming, and with a little kick 
up the phone line operators’ collective backsides, 
should be viable in two to four years. 

Back to reality, though, and this option is supported 
by the QuickTime Streaming Server, which can dish 
out the data as fast as a receiving computer or server 
can receive it. Unfortunately, there are hardly any 
companies that run this type of server in the UK or 
Europe because of the limited number of viable users. 
In the States this is much more common, but then 
again, they aren't still using modems. 


Progressive streaming 

This is the method that you will probably be most 
familiar with. A request is sent to the Web page 
from the server, followed by a calculated delay. 

The server checks how fast you are able to receive 
data, along with its present server strain (the 
amount of people trying to ‘pull’ the stream from the 
server down its single or dual fast connection to the 
Internet backbone). 

It then sends the audience a stream which after 
being cached, will begin to play what has downloaded. 
As the stream nears the end, the next installment has 
loaded, cached and is ready to play without the 
audience being aware that the footage is actually only 
coming in small, easy to manage chunks. Progressive 
streaming is supported by all the three main streaming 
formats and direct embed. 


Direct embed 

Like the above progressive streaming but not so 
user-friendly. This method doesn't need a special 
server, doesn't need anything actually. You simply 
embed the footage into your HTML. 

This, of course, leads to three seconds playing 
followed by a big jerk while the rest gradually 
loads. After the entire footage has been downloaded, 
you can view it as you would view any normal clip. 
However, even with well compressed footage being 
very large in size, this is only recommended as an 
emergency measure. 


Zip 

Zip up your file, add a link to the zipped 

file and let your audience download the file and 

view it on their computers. For obvious copyright 
reasons, you may not want every Tom, Dick and Harry 
getting their mits on your raw footage clip, but this 
remains the fastest way to get yourcontent > 


HISTORIC FILMS He 


Avisit to Apple’s QuickTime Website at [w] www. quicktime. 
com, is a myst for all digital video enthusiasts and pros alike. 
With up-to-date news, making the most of QuickTime'’s many 
features and checking out upgrades, this site includes a free 
QuickTime 5 download. 


One of the largest stores of footage can be found at 

[w] www.historicfilms.com. It is likely that massive image 
libraries will become the new first point of call for broadcasters 
and advertisers, removing the time and extra cost of going to 
video catalog agencies. 
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When shooting and creating streamed 
content, do remember that you should 
prepare and shoot your footage as you 
would for video and TV production. 
Take care not to make your footage 
unusable (or at least unsuitable) for 
your Internet audience. Keep 
backgrounds plainer, and props and 
articles to a minimum and low levels 
of contrast for better definition when 
compression occurs. These are some 
of the things that lossy CODECs and 
low file sizes require. Youraudience is 
also looking at your footage with three 
times less screen space than ina TV, 
so keep what you need in your view 
finder and scrap the rest! 
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It's better to work with your footage as large as you can, only 
shrinking the screen size at the end of your project when you 
compress your rendered footage. This enables you to be more 
accurate with editing and effects. 


to your audience. It just doesn't look nearly as 
impressive as the real thing though. 


Limiting sizes 


Having a big one isn't always a benefit on the Internet. 
This is simply the most important factor in Web 
streaming, bar none. Size comes in two danger areas, 
the size of the physical movie (for example, 720x576 
or 320x240 pixels) and the size of the streamed file. It 
makes it even more important than the format of Web 
stream you are using: a stream that is too large, be it 
RealMedia, AVI, MPEG or QuickTime is still too big. 
We were talking about CODECs earlier — these are 
Compressors, at the production end (ie, you) and 
DECompressors at the audience end. For people new 
to DV, CODECs can be thought of as doing the same 
thing as a JPEG graphic, where you select the level of 
quality out of 100 per cent. CODECs do the same thing 
but for an entire length of moving digital footage. 
Using a CODEC is of paramount importance, as 
even raw footage (around 100MB per 10 seconds) can 
be directly converted to a Web stream and placed ona 


Multimedia 


equivalent 


You can create your masterpieces with an NLE (non-linear 
editor alone), but to really create stuff that people will make a 
bee-line for on the Internet, you could do worse than learning 
software like Adobe's big success, After Effects. 


server. You are aiming for the best quality footage with 
the smallest possible file size. Unfortunately, having 
the CODEC to compress on your side means that the 
audience need to have the same CODEC to 
decompress to see the footage, so it is important to 
initially compress using the best quality CODEC you 
have on your system. Because this may not be the 
most widely distributed CODEC, it is good practice to 
re-encode using, for example, Indeo 3.2 or Indeo 
Video 5.1 for AVI files, orthe Cinepak or Sorenson (or 
Sorenson 3 with the latest QuickTime relase) if 
creating QuickTime. 

Frame rate also affects the size proportionately, It is 
always nice to keep the DV default of 25 frames per 
second, but if you could reduce the file size by over 
one third for minimal loss of quality, most people 
would. So simply reduce the frame rate to 20, 18 or 15 
fps when encoding (every CODEC has this option), and 
the audience will get your footage 20 per cent faster. 

The standard size for Web streamed content is 
medium multimedia standard 320x240. This is ample 
for the audience to see everything you want, with 
minimal quality loss. There is no rule of thumb for the 
maximum file size of your footage, it just depends how 
long it needs to be to get across your creative content. 
However, if, for example, it’s 16-20 seconds at 
320x240, compressed to high quality, with a 20-25 fps 
frame rate, you wouldn't want your footage to be 
longer than 2.5MB. 


The tutorial 


Web streaming is all well and good, but to get 
something worthy of the mighty Arbuckles name, a few 
DV shots stitched together in Premiere simply isn't 
going to cut it. The brand is trying to portray a new, 
cool, funky and fun image. It also has to conquer the 
market who is going to actually support the brand — 
the 18-36 B C D male group. Inthis tutorial, we will 
use After Effects to create an in-your-face Arbuckles 
ad, and convert it to a Web stream suitable to run off 
our new Arbuckles Website. For the sake of 
screenshots, the tutorial has been created at a size of 
640x480, too large fora Web stream, but we'll shrink 
the footage in the last stage. GEIS 


Expertise provided by Mark Towse [e] mark@bigimpact.tv 


Adobe After Effects tutorial 


Creating a video ad to stream from our new Website... 


: Setting up the background 


Keeping people interested with moving images during your advert is a must, and this is how we've done it 


There's a save disabled 
demo of After Effects 
on the cover CD, 

and you'lLfind the 

files to accompany 
this tutorial in the 
Tutorial\Streaming 
media folder. 


(©) 


Audio 


We didn't add audio to this clip 
because of the large increase in 
file size, but you can experiment 
with loops and MP3 files. See 
our Sound Design feature on 
page 84. 


Dreamweaver 
Exchange 


If you're a Dreamweaver user, an 
excellent, easy way to embed 
without getting your hands dirty 
with code, is to visit the 
Exchange, where you will find a 
number of excellent free 
extensions for Dreamweaver 
which do all the nasty bits for you 
at the click of a button, go to 

[w] www.macromedia/ 
exchange/dreamweaver 


Open After Effects and click Composition> 

New Composition, then set the composition 
size to 320x240, with square pixels as your 
aspect ratio. Name the comp Arbuckles Main for 
reference. Set the frame rate to 25 and set the time 
length to 16 seconds. Because the ad is going to be 
relatively short, we can keep a good frame rate for 
optimal quality. 


In the Effect Controls box, which should be 

open on the right of your screen, you should 
increase the text size to 124, the colour to white and 
turn on the high-quality Anti-aliasing by clicking the 
little line we have circled. Then drag the right upper 
handle of the Bézier line and move it down to create 
a gentle wave. 
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Create another composition, named Arbuckles 

background, with the same settings and click 
Solid>Create Solid. Click the ‘comp size’ button and 
don't worry about the colour settings. Call the solid 
‘squiggly text 1’. The new solid will be placed in the 
middle of the new comp. 


Drag the Bézier control points so they match 

the screenshots. Click on the solid in the 
timeline and press ‘e' to bring up the effects twirly. 
Twirl this down to reveal the keyframe attributes. In 
the Effect Controls box on the top-right of the 
screen, drag the left margin handle to move the 
‘Arbuckles’ text off the screen to the right. 


Twirl up the path text twirly to gain some 

space. Now copy and paste the same layer 
five more times. We are going to modify the 
keyframes and Bézier paths to give us mulitple 
snaking ‘Arbuckles’ text across the page for the 
duration of the clip. 


Make sure the other layers travel along the line 

at different times by modifying where the 
keyframes start and end, and that they span the 
entire height of the page. The keyframes on the 
timeline can be moved by dragging the created 
keyframes left and right. You need to spread the 
times the layers move so they fill up one second less 
than the composition length, which is 15 seconds. 
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Click on the new squiggly text solid in the 

timeline and click Effect>Text>Path text. Type 
ARBUCKLES in capitals and choose a suitably beefy 
font. Impact is a good choice and is installed on 
most systems. 


Click the mini stopwatch icon next to the ‘left 

margin’ timeline settings to create a keyframe. 
Drag the timeline slider to eight seconds, click on it 
again to create another. Now, at this keyframe, use 
the left margin slider in the Effects Control box to 
drag the text along the Bézier line to the left. You 
can click Alt while doing this to see it happen on 
screen in real-time. 


Rename the layers by clicking on each layer in 

the timeline and pressing Enter, so you can tell 
which is which. You should make one of the layers 
last from 0 to 15 seconds and finish at the centre of 
the page. Click on the Arbuckles Main composition 
tab in the timeline and drag the Arbuckles 
Background to the timeline from the project 
window. This is called nesting compositions. > 
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HTML 


Cleaner 5 users can make use of 
the software's ability to directly 
embed the stream in a Web page 
and publish the HTML. All you 
have to do is upload the file and 
the HTML page. 


TIFs 


The transparent TIF images are 
simply black and white 
Photoshop PSD files, with any of 
the three channels duplicated 
once. This new channel then 
becomes the default Alpha 
channel, which automatically 
makes the black areas of the 
image transparent. 


Import the piece of footage ‘pretty in pink.avi' 

and ‘Arbuckles mental background 2.avi' from 
the cover CD. This is a colourful, billowing repeating 
background which always looks good and is a sure 
fire way to impress. Drag it onto the timeline in the 
Arbuckles Main composition. 


From the top-left project window, drag the 

Arbuckles background composition onto the 
timeline. This is now a nested composition, and all 
the individual layers we were working on in one 
composition are combined into a grey line on the 
timeline. At the bottom of the screen, click the 
Switches/Modes button. 


The Switches/Modes section enables us to add 

Blending modes, similar to the ones in 
Photoshop, or use the Alpha or Luma channels to 
blend layers together in great-looking ways. We 
want to use our snaking text as an Alpha map, so on 
the bottom layer, click the Alp dropdown 
(highlighted on screen) and select Alpha Matte. The 
background now ‘shines’ through our text shapes. 


: Building the message 


With an animated filler lasting the advert duration intact, we now need to give 


the audience a reason to be watching, building a focus for our final hook line 


In the project window, click on the new folder 
icon. With the new folder highlighted, press 
Enter and type in ‘body bits’. Import footage into 
this folder and put the files straight body. tif, 
blood.tif, cross.tif, hammer.tif, bent over.tif, 
q mark.tif and arbuckles bottle.tif on the cover CD 
into it. Click Guess for the Alpha channel and 
After Effects will pick out the correct setting. 


At alternate keyframes, set the opacity from 

100 to 0, fading the question marks down. We 
want the question marks to flash, not to fade 
though — so here's a top pro trick. Right-click on 
each of the opacity keyframes. Click the Toggle 
Hold Keyframe option. This makes the change 
happen at the moment the hold keyframe is 
enabled, and is a much underused trick. The 
question marks will now flash on screen. 
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Drag the timeline marker to 1 second and drag 
the straight body.tif there as well. Place the 
arbuckles bottle.tif file at 1.15 seconds. At two 
seconds, drag the q mark.tif over your Arbuckles 
Ales drinker’s head. Press ‘S' to open the scale twirly, 
set the files to 60 per cent and arrange to suit you. 


Now to change the anchor point of the bottle 
layer, so that we can rotate it around our star's 
mouth. Twirl down the twirly manually and change 
the anchor point’s Y value to 0. Re-position the layer 
as it was before. It will move down initially thanks to 
the new anchor point: the point around which all 
transformations take place. 
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On the q marks layer, press ‘T' to open the 

opacity twirly. Place six keyframes at quarter 
second intervals, by clicking the mini stopwatch icon 
in the timeline. If necessary, click the Switches/ 
Modes button to swap between the two sets of 
menus in the timeline. 


Now we make our character story, an inept 

individual who hasn't worked out the wonders 
of the new Arbuckle's twist off bottle cap — doh! 
After the final question mark, click on the bottle 
layer and press ‘P' for the position twirly. Create a 
keyframe. Press 'R’ for the rotation twirly and create 
a keyframe. Now press ‘U’ and all attributes 
containing a keyframe will be displayed. Drag the 
timeline marker to four seconds and make a new 
position and rotation keyframe. Move the layer to 
match the screenshot. 


Create five more rotation keyframes at quarter 


second intervals, rotating every other 

keyframe so it is pointing downward. Don't Toggle 
Hold Keyframes this time, you will get smooth 
motion. Trim the layer to last only as long as the last 
keyframe, by dragging the circled layer crop marker 
to the keyframe. At the last keyframe, drag the 
blood on to our star’s mouth. For half a second, 
place two keyframes, moving the blood downwards 
slightly. Create opacity keyframes from 100 per cent 
to 0 per cent. Time for scene 2. 


Leave the character and elements on screen 
for a second, and flash the cross on and off 
over the character — indicating that this isn't the 
right way to open the bottle! Using the techniques 
described so far, create two more mini stories. One 
with the guy bending over, using gluteal muscles to 
try and get hold of his beer and the other using the 
hammer. After each of the scenes, add the flashing 
cross. Scale and position to suit. 


Do a RAM preview and edit the occasional 

keyframe to your taste to get the story flow 
spot on. When you have RAM previewed, Alt-drag 
the timeline marker to see parts of the footage in 
real-time. When you are happy, click the circled ‘shy 
layers’ button and click on the shy control to hide 
the layers we are finished with. 


Part 3: Bells and whistles 


Moving text and twee animations are great, but for adding a bit of class to the end of the advert, we need 
a great hook line that will stick in our audience's mind... 


Demo 


The demo on the cover CD is 


save disabled. The tutorial should 


take you about 2.5 hours to 
complete if you know your way 
around After Effects reasonably 
well. If you are dabbling, make 
sure you put aside about five so 
that you don't lose your work. 


Premiere 6 


AE's sister product, Premiere 6, 
contains a trimmed down version 
of Cleaner — Cleaner 5 EZ, which 
will provide you with a greater 
amount of export options, 
CODECs and quality settings. 


Live Webstreaming 


We've partnered with 
webstreaming.com to put the 
video created in this tutorial on 
the Web, as part of the site at 
[w] www.arbucklesales.com. Log 
on and see. If you'd like to get 
some video content hosted on 
your own site, turn to page 62 
where webstreaming.com is 
offering 100 readers three 
months of free streaming hosting. 
It's a giveaway worth over 
£29,000 in total. 
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ay Now create a new composition, called final 
text 1, Double-click the Arbuckles Background 
comp in the project window to open it. Ctrl/ 
Command+C to copy the final ‘Arbuckles' which 
remains on screen. Double-click the final text 
composition in the project window and paste the 
copied layer. On the layer, in the timeline, press ‘E’ 
for the effects twirly. Click on the path text twirly to 
open the relevant Effect Controls box. 


“ew twist open cal 


Bl 


no howl 


eg opener 'euireg 


You should have two nice smooth text lines 

which follow the line of the main Arbuckles 
text at the end of our ad. By now, no one should be 
in any doubt about how to open their Arbuckles 
Ale! Now we need to save, render to a compressed 
format, convert to a Web stream and we're there. 


Click Options, change the text to ‘new twist 

open cap’ and make the text much smaller, 
again to suit your personal taste. Copy the 
composition (in the project window), call it final text 
2 and change the text to ‘no bottle opener 
required!'. You only need to make the keyframes in 
these compositions last for one second, then go to 
Composition>Composition Settings and change the 
comp length to 1 second. For the final text two, 
reverse the left margin keyframe so it goes from 
right to left. 


arr. 


oO Go to File>Export>QuickTime movie. This is 
actually the Export to Webstream option, and 
it is very well hidden, despite being a major feature 
of After Effects. After you have named your 
composition ‘Arbuckles Webstream’ and clicked 
Save, you will get the settings which enable you to 
create the Webstream. Click Settings, Compressor 
should be Video, Frame rate 25 fps, Quality 
Medium and OK. Size should be 320x240. 
Afterwards, unclick the sound options and you're 
ready to go. 


3 | In the main comp, drag the two new 
compositions onto the timeline and manually 
position final text 1 layer above the main Arbuckles 
text. Do the same, but below, for the final text 2. 
Position the layers at 15 seconds on the timeline. 


arbuckles_webstream_4.mov 


The fast stream option is default and is suitable 
for servers which support the QuickTime 
Streaming Format. Now all you have to do is embed 
the stream in your Web page, and you are all 

streamed up — the Arbuckle’s way! EEE) 
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streaming media hosting 


Over £29,000-worth of streaming media for Computer Arts Special readers 


nyone who regularly builds Websites 
will probably want to stream some video 
or audio from one of their creations, 
ji at some stage. To accompany our 

Complete Web Design Special, we've teamed up with 
webstreaming.com to offer readers the chance to get 
free streaming media hosting. 

webstreaming is giving 100 Computer Arts Special 
readers free streaming for three months. Given that the 
starting price for one month’s streaming is £99, this 
means each of the 100 readers who apply for the offer 
in time will get free Webstreaming worth £297. 

Overall, that means we're giving away streaming 
hosting worth £29,700. As you know, streaming media 
can be used for entertainment, education, advertising 
and business. Sites with streaming video bring motion 


Web Design 


and excitement to their media mix, and good video can 
make your site stickier with visitors. 


The webstreaming software box 
To apply for this free webstreaming offer, you need to 
log onto [Ww] www.webstreaming.com/computerarts 
straight away and fill in the form. webstreaming will 
send you its free software box, and inside it you'll find 
a CD-ROM showing you how webstreaming works, 
with an explanation of some of its benefits. Plus, 
there are some dynamic examples of webstreaming 
inaction. 

In addition the software box (as pictured) contains a 
special offer card. Fill this in and if you are one of the 
first 100 readers to reply to webstreaming, you'll get 


| free streaming hosting worth £297 webstreaming will 


write back to you and ask you to supply details of the 
material you wish to stream. 


The rules 

1. Employees of The Future Network and 
webstreaming.com, and their agents or families, may 
not enter. 

2. No multiple entries. 

3. No cash alternative. 

4. webstreaming reserves the right to refuse the 
hosting of certain types of content. 

5. Closing date of the offer is 1 April 2002. 
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courtesy of 
Webstreaming 
enter your details for this offer at 


www.webstreaming.com/computerarts 
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A game presents your brand in a positive and fun wau; 
Sprite Interactive takes us through its games design methodology 


eaturing a game on your Website is a great 

way to add a new level of user interactivity 

and stickiness to your site. Sticky content is 

Website content that encourages repeat 
visits, such as constantly updated information, for 
example, news stories or articles, special offers and 
promotions and, of course, games. 

The stickier you make your site, the better your 
chances of converting visitors into clients and 
persuading them to stay on your site longer and 
explore your site further. By providing the user with a 
game, you are actually ‘giving’ them something. At the 
same time you can brand your games, so the user is 
also exposed to your logos and so on. A game also 
presents your brand ina positive and fun way. 

We have chosen to discuss Flash for the purposes 
of this article because it can produce fantastic 
Web-based games within an extremely small file size 
so they can easily be stored on and played back from 
your Website. The examples in the methodology refer 
specifically to Flash content, but can easily be applied 
to games and content developed in other applications. 

But let's get into the design methodology: we use a 
set of guidelines called the games design 
methodology , which basically defines how to build a 
game, decide on the cost of a game and how the 
development process is paced, and is used by a wide 


Games are a great way to attract visitors to and increase the 
‘stickiness’ of your site. 


range of design consultancies. The methodology can 
be applied to any game, whether it is Web-based or an 
off-the-shelf package, but for the purposes of this 
article we'll concentrate on Web-based content. 


Games: a breakdown 


A program or game is made up of a series of 
instructions that tell a computer how to carry out these 
instructions and in what order. It is a logically 
structured process that needs an equally structured 
development methodology to define it, which is what 
this methodology is. Maintaining a clear mental image 
of the development of a game and all the associated 
assets and instructions has become an extremely 
involved process. To develop immersive applications 
in Flash now requires many skills and one of the most 
important of these is organisation. 

This methodology is the tool that has been lacking 
in most development environments: a tool that tracks, 
organises and allocates resources. Combined with a 
program such as Flash, it becomes a package to steer 
you through the whole games development process. 

The solution is simple. The root of the methodology 
is to teach you to break a large-scale problem (a 
game) into smaller components that can be 
constructed independently by different members of 
the team. These are then combined at a later stage to 
form your game. 

This makes this methodology a useful way to spec 
out any software product. It also helps the developer to 
build an image of what it is they are building and the 
amount of resources and time needed to complete it. 
The system is a plan for pacing a project. 

Once the programming and asset preparation is 
underway, it is straightforward enough to constantly 
revisit your outline methodology and track where you 
are in the project life cycle. By splitting the project up 
into manageable chunks, the system also enables you 
to revisit and rethink your plan. What seemed like an 
efficient division of labour at the beginning of the 
project can turn out to be the wrong allocation of > 
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resources, but this can easily be changed and 
restructured. The larger and more complex the system, 
the more often this restructuring may take place. 

What follows is a step-by-step guide through the 
game development process: 


1. Textual description of the game idea 


Before you begin building the spec for your game, the 
first crucial stage is to produce a description that can 
be decomposed into its basic elements. This 
description is essentially a narrative, and you need to 
include as much detail as possible about aspects of 
the game such as attributes and actions associated 
with objects or characters. The more detail you 
include, the easier it is to build a complete structured 
design from it. To give you an idea of how to write a 
textual description of a game, here’s an example of a 
description fora Space Invaders type game: 

“You control a spaceship that is being attacked by 
aliens descending from above in their UFOs. You fire 
missiles to destroy the aliens and they can drop 
bombs on you. If your craft is hit by an alien projectile 
it is game over.” 


2. Identifying the assets 


The second stage in defining your game is to identify 
the game assets by extracting the nouns from your 
textual description. To show you how to do this we have 
used the above example and highlighted the nouns: 

“You control a spaceship that is being attacked by 
aliens descending from above in their UFOs. You can 
fire missiles to destroy the aliens and they can drop 
bombs on you. If your craft is hit by an alien projectile 
it is game over.” 

The nouns are the top-level assets (or objects) in 
the game and in Flash these can usually be translated 
to movie clip assets. The identified assets are: 


* SPACESHIP 
* ALIEN 
-BOMB 


* MISSILE 

* PROJECTILE 
* CRAFT 
*UFO 


Once you have identified your movie assets, it is 
important to remove any that are duplicates or that are 
misleading. For example, the PROJECTILE asset is 
potentially misleading because it is simply an instance 
of either the MISSILE or BOMB assets. Similarly, by 
reading through the text you can see that UFO is the 
same as the ALIEN asset and CRAFT is simply another 
way of describing the SPACESHIP asset. You need 

to perform this check to ensure that each asset is 
unique and to remove any redundant information 

from the spec. 


3. Specifying the assets 


With the assets identified, the next step is to plan their 
specification. This involves identifying the various 
states associated with each asset and then deciding on 
the graphical and audio requirements for each state. 
For example, the SPACESHIP asset can be defined to 
contain the following states: 


SPACESHIP (ASSETS) 


+ Moving (2 static images, for left and right directions) 
+ Firing (2 frame movie, 1 audio clip) 
- Exploding (6 frame movie, 1 audio clip) 


4. Final asset specification 


For each of these states, the graphical and audio 
requirements are specified to give an indication of the 
amount of resources that should be assigned in the 
development of that asset. The final asset specification 
looks something like the table below. 

One point to take into account is that many 
graphical animations, such as a car driving away, can 
actually be achieved using simple transformations of 
single images. In Flash, you may only require a single 


3. Identify the Assets: 


Moving Moving 

(2 static images) (2 frame movie clip) 
Firing Bombing 

(2 frame movie, 1 (2 frame movie, 1 
audio clip) audio) 


Exploding 


f ie, 
elds oan 
(6 frame movie, 1 
audio clip) Sa 


SPACESHIP (ASSETS) ALIEN (ASSETS) BOMB (ASSETS) 


MISSILE (ASSETS) 


Moving Moving 
(1 static image) (1 frame movie, 1 
audio clip) 


image reduced in size over time. This reduces the 
development time and suitable situations should be 
identified after this stage. 


5. Specifying asset dynamics 


This stage of the process defines the graphical and 
audio resources required for the project, and the 
necessary dynamic structure. At this stage, you have to 
identify the properties associated with each asset, the 
level of user interaction required for the game and the 
functions that the game itself must perform. 


5.1. Identify asset properties 


Each asset in the game contains a number of 
properties that define specific features about each 
instance of that asset. For example, the player's 
spaceship will have a pilot, damage level, score and 
ammo, while the alien will be of a certain race and 
colour. In Flash, each movie clip asset has its own 
in-built properties; these include its _x position, 

its _y position, its _width and its _height, which 

are used for controlling the size and position of the 
asset. Take a look at the properties in table 5.1 below. 


5.2. Identify user interaction 


With the graphical aspect of the game planned out, the 
next stage is to define the dynamic aspects of the 
game. By defining the possible user interactions that 
can occur, the required event handlers for each of the 
game assets can be more easily identified. Firstly you 
need to write a textual description of the control 
methods used in the game, for example: 


“The cursor keys are used to move the spaceship 
left and right. The space bar is used to fire a missile.” 
From this description, certain elements of each 
event can be identified: the input, the action and the 

asset. These form the basis for the functions 
associated each asset, outlined in table 5.2 below. 


5.3. Identify asset functions 


Each game will perform actions based on user input 
and game functions. A game function could be used to 
control the aliens, keep score or determine the 
winning status. To identify the possible functions that 
an asset can have, the verbs need to be extracted from 
a textual description, for example: 

“The alien craft descend down the screen and 
drop bombs at random. When a missile is fired it > 


Ale Manis a simple but fun Pacman-style game that we'll be 
building in the next feature. 


5.1. Identify assets properties 


SPACESHIP(PROPERTIES)} ALIEN (PROPERTIES) BOMB (PROPERTIES) MISSILE (PROPERTIES) 


i Race/Colour 


5.2. Identify user interaction 


SPACESHIP (EVENTS) MISSILE (EVENTS) 


Move Fire 
(called when cursor (called when space 
key pressed) bar pressed) 


= 


5.3. Identify asset functions 


SPACESHIP (FUNCTIONS)| ALIEN (FUNCTIONS) 


Descend/Drop Bomb 
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moves up the screen until it reaches the top or hits an 
alien. The player wins when all aliens are destroyed”. 

From this description functions forthe BOMB, 
MISSILE and PLAYER assets can be extracted. The 
functions are called automatically by the game engine 
and aren't associated with any player input. Table 5.3 
(on page 67) shows the non user-based functions 
associated with each asset. 

By this stage you will understand the scope of the 
project, the assets needed and how the workload can 
best be allocated for the efficient development of 
your game. 


The tutorial 


In the following tutorial, we talk you through 
developing a game for the fictional Arbuckle Ales 
Website. The game was developed using the 
methodology which is worth applying to the Arbuckle's 
game as you work your way through to see how it can 
aid the development process. Try writing your own 
narrative on the game to see how to separate each 


asset within the game, and then assign different 
properties and functions to these assets. You should 
end up with results similar to the tables below. 


Ale Man loses by being killed by the kebabs. 


The tutorial. Identify the Assets: 


(2 frame movie) 


00 


(4 movie clips for 4 
directions) 
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Sound 
(1 burp noise, 1 gulp 
noise, 1 dying noise) 


The tutorial. Identifying asset properties 


Position 


a 


Made of static square 
(1 frame static movie) tiles 


4 a8 


The tutorial. User interaction 


Move 
When cursor key 
pressed 


ee 


Create the Ale Man game 


In this tutorial we'll build Ale Man, a Pacman-style game created to increase hits to the site 


Part 1: The grid 


To begin building the game, we first need to create the board... 


The history of 
Pacman 


Pacman was actually conceived 
at lunchtime. The game's creator 
had ordered a whole pizza for 
himself, he took one slice from 
the pizza, and Pacman was 
created. Pacman's name comes 
from the Japanese word 
paku-paku, which means ‘to eat’. 
The game was called Puckman in 
Japan, but was changed to 
Pacman in America for obvious 
reasons. The game took one and 
a half years to complete, and was 
created by a team of five people. 
Itis the greatest selling arcade 
game of all time, and was also 
the first game to havea 
recognisable character. 


ey The Ale Man game is based on the popular 
Pacman design where the player navigates 
their character through a maze collecting points on 
their way while avoiding the ghosts roaming around 
the maze. The aim of this game is to collect all the 
beer bottles and avoid the kebabs. 
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4 | The board is generated using the 
duplicateMovieClip ActionScript function to 
create an instance of a particular tile for each 
position on the grid. You first add each tile to the 
AleMan asset, these are duplicated for each tile on 
the board. Name each tile ‘tile1’, ‘tile2' and so on. 


Next you use two ‘for’ loops to generate the 
board, (Step 7 in the script file). The first cycles 
through each row of the grid, and the inner one 
cycles through each column of that row. At each 
grid position, use the duplicateMovieClip() function, 
get the tile number from the board array and 
duplicate the associated tile onto the stage. 


The board design uses the grid construction 

approach that works by using an array to 
define the layout of a set of simple tiles on a grid. 
The game will be developed as a normal Flash library 
asset, we'll call it ‘AleMan’. 


@ Now insert the ActionScript (Step 5 in the 
script file) to create the board, this is placed in 
the frame action of the first frame. The variables 
boardxoffset and boardyoffset define the 
co-ordinates for the top-left hand corner of the 
board, relative to the top-left corner of the AleMan 
movie and position the tiles on the movie. 
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8 | Once duplicated, the tile needs to be placed in 

its correct position on the board (Step 8 in the 
script file). This is done for both x and y position by 
calculating its position on the grid multiplied by the 
height or width of the tile plus the offset of the 
board. An image is also imported to act as the 
background for the board (road.jpg). 


es ae 
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A grid of 15x11 tiles is used, tile size 35x35 
pixels, this means that the size of the board is 
525x385 pixels. More tiles are required for the walls 
and borders, these are simply created as separate 
Flash library assets. The main graphic for each tile 
must be 35x35 pixels in size and the top-left must 
be located at 0,0. 


6 | Next the board array is defined (Step 6 in the 
script file). This uses a two-dimensional array 
to define the layout of tiles for the board, 0 
represents no tile, 1 is a boundary wall and 2 is an 
internal wall. These numbers correlate with the tiles 
you will duplicate for each position on the grid. 


9] Place the AleMan movie on the stage to see 
the generated board. The next step is to add 
bottles for Ale Man to collect. In the same frame 
action, add an identically-sized array to define the 
bottles that appear on the board. Get the bottle 
movie asset and place it on the AleMan movie, just 
like the tiles. Name the bottle assets ‘thing1', 
‘thing2' and so on... The code in step 9 of the script 
file is used to duplicate the newly created bottle 
assets onto the board (insert it into the first frame 
after board code). > 
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Part 2: Adding the kebabs and Ale Man 


The kebabs are the equivalent of the ghosts in Pacman, and kill Ale Man if he runs into one. The following 
steps take you through creating and duplicating the kebabs and Ale Man 


Expert mode 


Setting the ActionScript panel to 
Expert mode enables you to input 


code directly into the window, 
making the coding process more 
efficient, and enabling you to 
format the code as you wish. You 
can also add comments to your 
code so that other developers 
can understand it more easily. 
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simply create this as a movie clip or use the 
one in the Ale Man library then place it onto the 
movie and name it ‘kebab’. The characters in the 
game must be the same width asa tile, although 
their height isn't restricted so they can be taller than 
the walls. The duplicateMovieClip function is used 
to duplicate a specific number of kebabs. 


SS Saree 
Now we'll add the move() function to the 
kebab asset. To do this, open the kebab movie 

clip in Editing mode from the library and open the 

frame action for the first frame. Then paste the code 
from step 13 in the script file into this frame. 


If the kebab isn’t moving then an array is 

created to store possible directions that the 
kebab can move in next. It looks at the parent board 
array to determine which directions the kebab can 
move and for each free direction, its corresponding 
letter (1, r, u, d) is pushed onto the array, unless it is 
the reverse of the kebab’s previous direction. 


o We first need an asset to represent the kebab, 


Now add the code (step 11 in the script file) to 

the first frame action to duplicate the kebabs. 
This code sets variables that control where the 
kebabs start, their speed and their numbers. The 
‘for' loop is used to duplicate the ‘kebab’ movie. 
The x and y co-ordinates are then set using their 
starting grid positions. 


Es 5 = ¥ eee XY, 
Every time the move() method is called, it 
looks to see if a kebab is moving or not. If it 
isn't, then the possible directions that the kebab can 
move in are put into an array, a random direction is 
picked and the kebab moves, The ‘kebabSpeed' 
variable is used to control how many frames it takes 
the kebab to move from one grid square to another. 


If the array doesn't contain any values then 

the kebab must be at a dead end so it has to 
reverse, otherwise a random direction is selected 
from the array. This is done by setting the ‘Xmove’ 
and ‘Ymove' variables to the x and y increment 
values that need to be applied to move the kebab in 
the chosen direction. 


You now have a board with kebabs placed on 

it. To make them move, insert an ActionScript 
function into the kebab asset that will be called 
every frame. First you must make the movie loop 
between two frames. This is done by creating two 
more frames in the Ale Man movie. Frame 2 is used 
to call each kebab's move() function while frame 3 
loops back to frame 2. 


G The kebab uses four variables to control 

the movement of the kebab. ‘moving’ is 
used to indicate whether the kebab is moving, 
‘previousDirection’ keeps track of its direction, and 
‘Xstep’ and 'Ystep’ control the amount the kebab 
moves. The move() function retrieves the current 
grid position of the kebab from the parent movie, 
and it checks if the kebab is already moving, 

since you need to wait until it's in a square before 
moving it again. 
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With the movement increments set, the row 

(r) and column (c) variables of the kebab are 
updated with the kebab's new grid position, the 
‘previousDirection' set and the ‘moving' indicator 
set to the kebab speed. Finally, if the kebab is 
moving, ie, ‘moving’ is not 0, then the kebab needs 
to be moved by its ‘Xmove' and ‘Ymove' increments 
and the number of frames left to move (moving) 
decremented by 1, so that when it reaches 0 the 
kebab is in its destination grid square. 


Kebabs and AleMan continued... 


Arrays 


Arrays are objects that are used 
to store an indexed set of objects 
or variables. For example, an 
array could contain a high score 
table, list of player names or the 
status of the game. Each element 
of the array has an index that is 
used to retrieve that element, 
which can be a reference to any 
Flash object. 


Variables 


Avariable is a container that 
stores a piece of data. The 
container itself is always the 
same, but the contents can 
change. Variables can be used to 
store information as the movie 
plays and can be used for many 
situations - to change the 
behaviour of the movie based on 
user interaction, for example. 


The last thing left to do is call the move() 
method for each kebab on the board. For this 
you need to go back to the Ale Man movie and add 
the code from step 19 in the script file to the second 
frame action and make the third frame loop back to 
the second frame by adding gotoAndPlay(2) to the 
third frame action. 


Scere Aerie 


Now that you have your character, you need 

to create an instance of him in the maze. The 
code in step 22 of the script file sets up and creates 
Ale Man in the maze, and needs to be inserted in 
the first frame of the movie, in the frame action 
after the kebabs have been created. 
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To control Ale Man you need to add some 

code to the second frame, since this is 
repeated throughout the game. The code to control 
him needs to detect whether a key has been 
pressed, so determine whether Ale Man can move 
in the requested direction by checking the board 
array. If it is a valid move, then remove the current 
‘Ale Man’ movie and replace it with Ale Man facing 
in the appropriate direction. 


What we have so far is a board with some 

kebabs roaming around it. The next obvious 
step is to add Ale Man. The Ale Man character 
moves in a similar way to the kebabs except that he 
is controlled by the player, not randomly. 


The first six variables set Ale Man's initial 

starting position on the grid, the number of 
lives he has, his score, how fast he walks and his 
walking state. In this case he is started in the top-left 
hand corner of the grid and is set to move at the 
same speed as the kebabs. 
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For example, if the left key was pressed, the 

block to the left of Ale Man's current position 
is checked. If it is empty, then the current*Ale Man’ 
movie is removed and ‘AleManleft' duplicated in its 
place. To actually move Ale Man, you need a similar 
method to the one used for the kebabs. To control 
Ale Man, add the code in step 25 of the script file to 
the second frame action. 


The different states of Ale Man moving are 

created as separate movie clips. Each frame of 
the movie has a frame action that stops the movie 
clip and the last frame action loops to the first 
frame. These movies can be found in the Ale Man 
folder in the library of the AleMan.fla movie. You 
can edit them how you like. 


The duplicateMovieClip fanction] is used to 

duplicate the ‘AleManright' movie to the 
movie ‘AleMan' and the newly created movie is 
positioned on the board using the ‘AleManCol’ and 
‘AleManRow’' grid positions. 
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First up, if Ale Man is stationary then the user 

can move him. He is controlled by using the 
four cursor keys. The last key stroke is checked 
using the inbuilt Key object, for example, 
Key.isDown(Key.RIGHT) will return true if the right 
cursor key has been pressed. For more info on the 
Key object, refer to the ActionScript dictionary. > 
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Part 2: Kebabs and Aleman continued... 


The ‘for’ statement 


A for’ loop can be used to repeat 
a block of code a specific 
number of times. It requires three 
expressions, one to start the 
loop, another to test whether it 
should continue and a third to 
increment the loop. 


19] Next, if akey has been pressed, the board 
array is checked to see whether Ale Man can 
actually move in the direction the player wants. If 
the destination grid square is empty then we can 
start to move him. This is done by first removing the 
current ‘Ale Man’ movie clip from the stage and 
duplicating the appropriate Ale Man in its place, for 
example, the Ale Man movie which is facing the 
direction we want to go. 


Once the new movie is in place, Ale Man's 

grid position is updated, using the alemanRow 
and alemanCol variables. His X and Y increment is 
calculated so that over the next few frames he will 
walk to the destination square instead of simply 
jumping there — these are alemanXstep and 
alemanYstep. Repeat the same procedure for all 
four directions he can move in. 


The final check is to see if Ale Man isn't 
stationary. In this case his X and Y positions are 
updated, using the alemanXstep and alemanYstep 
variables. To make Ale Man actually walk, the 
‘AleMan’ movie is instructed to move onto the 
next frame. 


Part 3: The finishing touches 


Now you have created the bulk of the game, here are the last touches you 
should add to make it the finished article 
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ee Both Ale Man and the kebabs are now happily 
moving around the maze, however you still 
need to make Ale Man pick up the beer bottles, get 
caught by kebabs, keep score and final gameover. 


4 | The ‘win’ frame features a message panel and 
a movie to detect a key press. Put the code 
from step 34a in the script file into the frame action 
of the ‘win’ frame to reset the game and display the 
panel. The green circle movie detects when you 
press space and restarts the movie. The code from 
34b is used to detect the keypress and goes into the 
object action of the green circle movie. 


To make Ale Man collect bottles, you need 

to add the code from step 32 in the script 
file to the second frame action of the main movie. 
The code checks the ‘things’ array to see whether 
Ale Man is standing on anything, if he is, the 
activate() method of the thing is called and the 
thing itself is removed. 


To catch Ale Man, a kebab simply needs to 

occupy the same grid position. Place the code 
from step 35 in the script file at the end of the kebab 
move()function. This code compares the position of 
the kebab with Ale Man and jumps to the ‘gothim’ 
frame of the main movie. 


Sane wri Pais i 


Now place the activate() function code, step 
33 in the script file, in the first frame action of 
the thing's movie clip. This function increments the 
player's score, displays the score and checks if he's 
won. The main Ale Man movie is moved to the 
frame ‘win’ if the player has collected all the bottles. 


G The ‘gothim' frame contains the frame action 
from step 36 of the script file that essentially 
resets the game assets and decreases Ale Man's 
lives. If he’s lost all his lives, it jumps to the last 
frame, which displays ‘game over’ in the same style. 


Mobile phone logo changer 


In this tutorial we take you through building a mobile phone graphic selector, which is a 


fantastic piece of sticky content that can be easily added to your Website 


Part 1: Building the selector 


The Flash movie is used to select a logo which is then sent to a specified number 
through a CGI script on the Sprite site 
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Select Your Logo 
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Next, the text elements are added on top of 
the background. An input text field is used to 


LS 


The first step is to create the background for accept the mobile number, the variable for the input 
a All the assets for this project can be found in the selector. This is done by simply importing field needs to be called ‘mobilenumber'. A button is 
the Logo Selector folder on the CD, and allthe | an image of a pub table (bg.jpg). The interface placed over the send button on the background 
code is in the file code.doc. elements are then arranged on top. that's used to activate the logo selector. 


Growth in mobile 
communications 


Mobile communication is the 
next leap in computing 
technology, it already has a 
strangle hold on the telephone 
market and is moving to personal 
communicators. Technology 
such as GPRS and Blue Tooth 
are giving us higher bandwidth in 
the mobile space, and it is only 


a matter of time before we 
move from SMS text messaging 


to full colour graphics rendered LS 
eS EE Oe The logos are stored separately on your 
Website. The mobile logo must be an Gg As well as the logo, you need to create a high To add the scrolling function, add code 6a 
uncompressed monochrome (1bit) 72x14 Windows resolution logo strip for use in the selector. The from the code text file to the first frame action 
Logo based .bmp file. These can be be created with Photoshop logos need to be spaced evenly within the strip. of the ‘Logo Strip’ asset. Add code 6b from the code 
promotions or even Paintbrush. You need to name these Import this image into a new movie clip called ‘Logo _file to the second frame: this defines the scroll() 
pmo tasebaces have opened s logo0.bmp, logo1.bmp and so on and upload them Strip’ and align the top-left corner of the image to function. Add code 6c to the third frame. Refer to 
to your Website. 0,0 within the new movie clip. the code comments for a description of the code. 


whole new space to run 
promotions from your Website. 
How about giving discounts to 


customers/clients who have 


downloaded your logo onto 

their phone? Or you could get 
your site visitors to enter a 
competition to send you requests 
for logos that you could then 
feature on your Website. 


Getting it working 


To get your phone graphic 
selector working, simply compile 
the Flash file, post it to your site, 


and when someone tries to use it, Place the logo strip on the logo selector and You need to add the logo previews. Import 

it will link to Sprite Interactive's name it ‘logostrip’ using a mask layer to only each of the mobile logos you created and, 

server and send the chosen logo show the first logo. You then need to add the scroll using the bitmap trace, convert them to vector 

to their phone via the mobile buttons, create two of these and place code 7a on images. Place each on a new layer, and fade them in 9 | The final step is to send the logo. To do 

jehenre: the left button and code 7b on the right one. This over five frames. Name the start frame ‘logo0', this, add code 9 to the send button. Refer to 
will make the logo strip scroll left and right when ‘logo1' and so on. Place a stop() statement on the the comments in this code for details on customising 
you click the arrow buttons. last frame action of each logo. the service. GEES 
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THE INTERNATIONAL MAGAZINE FOR 3D ARTISTS 


3D World, the only design magazine for 3D artists, 
animators and modellers worldwide. Inside this high- 
quality, industry-orientated publication you'll find... 
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Industry insiders reveal all 
about their film, game and 
TV projects 


Tutorials written by experts 
help you develop your 
knowledge of 3D 


Up-to-the-minute industry 
news helps you stay ahead 
of the competition 


In-depth reviews keep you 
informed of developments 
within the ever-changing 
3D industry 


Our coverdisc brings you 
exclusive demos of the latest 
packages and plug-ins, 
models and textures 


‘If you do it right, it looks effortless,’ 
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Into the 


third dimension 


The arrival of Shockwave 3D, Azel 1.5 and other 3D technologies 
are propelling the Net into the third dimension. We take an in-depth 
look at the use of 3D-based interactive content on the Web... 


ith the advent of Shockwave 3D and 
monumental support from 3D 
developers around the globe, designers, 
developers and creatives are slowly 
becoming more and more entranced by the prospect 
of 3D on the Web. 

Acopy of Director, an up-to-date 3D application 
and a dash of talent now seem to be the fundamental 
ingredients for developing Web-based 3D content. 
But, this said, although Shockwave is almost certainly 
destined to become the most popular 3D format on the 
Web, it’s not always going to be the best format - this 
of course depends on the context of one's site. 

E-commerce, entertainment, and good 
old-fashioned showing off (splash screens and the 
like) all require different approaches to producing 3D 
content. Whereas a complex site featuring a 2MB orso 
driving game will usually require the Havok Xtras 
(dynamics) and interactive, lingo-based behaviours 
that Director has to offer, a site showcasing watches, 
electrical goods or even cars requires a completely 
different approach. 

Creating 3D content entirely in the vector (SWF) 
format also requires a different way of thinking — 
artwork can be created from scratch or rendered from 
a3D application (LightWave, XSI or 3ds max) using 
RaVIX or comparable technology. 

3D content on the Web is still treated with cynicism 
though: the main reason for this being the bandwidth- 
gobbling nature of the medium, and the fact that an old 
PC just doesn't have the capabilities to display the 
content. 3D on the Web has also been used out of 
context in the past, with designers incorporating 3D 
elements, often for no apparent reason. 


Today, we have many technologies, providing many 
different solutions, all with a similar purpose: making 
3D on the Web a viable medium. Whether used to 
create games or online interactive presentations, 
they are all aiming towards bringing the world a much 
more dynamic, and at the same time user-friendly, 
3D Web experience. 


Game for it 


Creating games for distribution on the Web has 
recently crossed new boundaries. Whereas the 
ActionScripting capabilities of Flash 5 provided 
designers with the scope to develop some truly 
stunning 2D games (think Electrotank), the likes of 
Director 8.5 and Axel 1.5 have opened up new 
possibilities - the creation of online 3D games that 
little more than a decade ago would have made 
better-than-average PC or console games. 

Since its introduction last summer, Shockwave 3D 
has well and truly rocked the world of Web 3D, with 
online game designers embracing the platform. After 
all, Director, prior to its 3D behaviours and Lingo 
commands, was the preferred platform for creating 2D 
games for the Web. Just point your browser at 
Shockwave.com for an example of the diversity and 
potential that the Shockwave format offers. 

From here, it’s a logical progression to using 
Director 8.8 built-in 3D and dynamics tools to create 
more and more complex games - games that are 
impossible to produce in Flash. Fully textured models, 
controlled by Director's native lingo make setting up 
environments and objects a whole lot easier. But as we 
all know, games aren't simply about aesthetics. > 
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Shockwave 3D showcase 


Swift3D combines a dedicated 3D modelling and animation 
environment with a speedy vector rendering engine. [w] www. 
swift3d.com/extreme showcases the power of the tool. 


This is where Director 8.5’s tools really shine. Thanks 
to the fully-integrated Havok rigid body dynamics 
engine in Director 8.5, setting up collisions isn't a 
problem. In theory, a few Lingo commands can be used 
to set up objects’ mass, elasticity, force, velocity and 
momentum. The fact that it's now viable to import 
models from all major 3D apps, apply textures, 
simulate dynamics and export it all to such a small, 
manageable file makes Shockwave very much a Web 
3D format of the future. 

One gaming genre that has benefited from the 3D 
behaviours and dynamics Xtras found in Director 8.5 
are driving simulations. We talked to Matt Watkins, 
designer, and Dom Skiner, coder, at Zombie Flesh 
Eaters ([w] www.zombie.uk.com), who recently created 
a 3D driving game for Gorillaz.com. Matt was quick to 
assure us that he thinks Macromedia's format looks to 
be the future of 3D on the Web: “Shockwave seems to 
be easily the most adaptable and all-inclusive offering 
in the Web 3D arena. The power of Director means that 
you can do pretty much what you like with 3D.” He 
continues, “Director 8.5 certainly makes the most of a 
good machine and it’s great to see Websites that are 
really plug-in-based 3D games.” 

Optimising the game for the Web and specifically 
for those without the latest 3D accelerator cards 


Cult 3Dis a great tool for showing products in their full glory on 
the Web. Modelled in Maya or 3ds max, objects can be 
exported to the Cult 3D Designer where interactivity is added. 


proved to be a problem. As Dom Skiner explains: “It 
was hard to work with such a large open world. The 
world itself was equivalent to four square miles and 
there were over eight miles of road to deal with. 
Everything had to be highly optimised to get a decent 
playback speeds on lower spec machines. A ‘Wipeout’ 
style tunnel racing game would run much faster 
because Shockwave 3D doesn't seem to like huge 
expanses of fresh air.” 

Shockwave 3D is obviously a powerful format - and 
one that has the scope to produce some of the most 
entertaining and enthralling experiences on the Web - 
at relatively low file sizes. It’s already been used to 
great effect by many Web design agencies including 
Zombie Flesh Eaters, squid s 0 u p ([W] www.squidsoup. 
com) and ForgeFX ([w] www.forgefx.com). The only real 
limitation at this point seems to be the fact that the 
end-user needs a relatively fast graphics card and 
machine to view content. 


Axel excel 


Amore recent technology than Shockwave 3D, Axel 
works on the same principle: it’s an authoring package 
that exports to a dedicated 900K browser plug-in. In 
all honesty though, complex 3D games are probably 


Some of the most original and exciting demonstrations of 3D on the Web 


Big Mouth Bass by Wayforward Technologies 


([w] www.wayforward.com) uses Shockwave 
3D to outstanding effect. It's hard to tell the 
game apart from similar games on the 
PlayStation, plus it’s only a1.4MB download. 


See it at [w] www.shockwave.com. 


Web Design 


Slap shots a-plenty with this extremely 


neat-looking game developed by Mindcomet 
([w] www.mindcomet.com). Sweeping camera 
movements, rigid bodies and superb textures 
make it worth the 1.1MB download. 


A great showcase for the Havok dynamics 


Xtra present in Director 8.5, this 3D pool 
game can be seen at [Ww] www.havok.com. 


What's even better about it though is that it’s 


only 227K. 


Designed by CleverMedia ([w] www. 
clevermediastudios.com) this Doom-esque 
first person shooter is a prime example 

of the speed and quality of animation that 
Director 8.5 and the Shockwave Player are 
capable of. 


best left to Director 8.5. Axel is somewhere in the 
middle of being a dedicated 3D tool and a 
presentation software - enabling you to model, as well 
as animate and assign interactive behaviours to 
objects directly within the application. 

Although lacking in serious collision detection 
tools, it does incorporate a complete IK system, 
particles and texture-mapping features. This makes it 
particularly useful for animating 3D characters and 
assigning simple, yet effective interactions to them. 

Mick Garner of Freakish Kid (see the tutorial on 
page 81) has been using Axel in-house for six months 
now and describes what he thinks are the benefits of 
the application. “When you first open Axel you 
immediately get a feel for its simple user interface - it 
has been laid out in a logical manner which allows you 
to use the icons and shortcuts effectively.” He 
continues: “You can see your interactions and sensors 
as they are assigned, linking them to your work ina 
simple and easy to follow method. Animating in 
AXELedge is straightforward, as is linking animation to 
your project. Personally, | find the best thing about 
Axelis the fact that you don't need to understand 
programming to use it to its fullest effect.” 

A prime example of the use of Axel can be found 
at [w] www-fridgemagnets.tv. Based on a new 
fully-animated TV show of the same name, the 
interactive 3D content at Fridge Magnets seems to 
illuminate all of Axel’s best bits - accurate character 
animation, dramatic sweeping camera movements and 
simple, yet incredibly effective texturing. 

Simon Rodier, Web designer at Moovmento, the 
company responsible for the Fridge Magnets Axel 
content, is enthusiatic about the possibilities of Axel. 
From a designer's point of view, though, he believes it 
could do with a few enhancements: “I think that Axel, 
and every other Web-3D package for that matter, has 
to develop a workflow more like multimedia-authoring 
tools rather than ‘enhancing’ 3D applications with an 
interactivity layer added on top. Most Web designers 
use many different software tools to create a Website, 
easily up to six or seven, and the interface and 
workflow of these applications need to be more 
consistent between each other. 

“Many Web designers don't have a 3D background - 
and don't have the time to spend more than one houra 
day ina given software. Any 3D authoring tool for the 
Web therefore needs to be simpler than a pro 3D 
package like 3ds max, LightWave or Maya. Existing 
multimedia standards will have to be applied to 3D on 
the Web if we wish to expand the scope and increase 
the impact of Web 3D.” 


Shockwave 3D provides the ideal platform for relatively 
complex games, such as the Gorillaz Geep Simulator, created 
by Matt Watkins at Zombie Flesh Eaters. 


Designer Mark Aldred from Japanese design firm DigiKoku considers the 
advantages and disadvantages of Cycore's technology... 


Previously considered a tricky way to Cult 3D ona day-to-day basis, “From 
publish 3D content on the Web, the designer's point of view, Cult3D is 
Cult 3D has taken a backseat in the probably the most accessible, 
recent Web 3D boom. However, for especially for those without a 
e-commerce and product showcases programming or scripting background. 
the technology is probably about the Unlike Viewpoint, which uses multiple 
best there is. Mark Aldred, designerat tools and a scripting environment, or 
DigiKoku ((w] www.digikoku.com) uses — Shockwave, which requires some 
Cult 3D 


One thing Axel isn't capable of is photorealism. 

And with more and more companies now deciding to 
offer users 3D representations of their products 
(enabling you to interactively rotate and zoom in) 
photorealism is a must. This of course, involves 
accurate modelling and texturing in a 3D package, but 
in orderto accurately render products, adding a little 


interactivity on the way, there are two realistic choices: 


Cult3D ([w] www. cult3d.com) and Viewpoint 
([w] www. viewpoint.com). 

What with the introduction of Shockwave and Axel, 
these two technologies have been overshadowed in 
recent months, but nevertheless still remain a viable 
solution for creating 3D content for the Web - 
particularly in the world of e-commerce. In most > 


Axel 1.5 provides 3D and Web designers with an easy way of 
creating interactive 3D presentations. The Fun Zone at 
[w] www-firdgemagnets.tv is an ideal example Axel's potential. 


knowledge of Lingo, Cult3D 
Designer provides a single intuitive 
graphical interface.” 

Publishing Cult 3D content to the 
Web also costs. This can sometimes 
cause problems when pitching to a 
client. Mark explains: “Both Cultand 
Viewpoint use the broadcast license 
system where the tools are free but it 
costs to display the objects online or 
hand out on CDs. In practice, it’s 
sometimes difficult for a company | 
trying to wina Web 3D contractwhen 
they have to explain why the customer 
has to pay twice for the 3D objects, 
once to have them made and again for 
the right to display them.” He adds: 
“But, overall I'd say Cult3D is the best 
all-round tool for producing Web 3D 
aimed at selling a product. The tool is 
stable, picture quality is good and the 
license prices aren't too expensive.” 


Web Design 


Atmospheric design 


Web Design 


cases Cult 3D and Viewpointcan be thought of as the 
virtual equivalent of consumers handling products. 


3D for design’s sake 


2D animation and design on the Web are dominated 
by one format, SWF, and one application - Flash. Once 
again, it seems only logical that users will want to 
expand the application's potential, and whereas Flash 
offers no dedicated 3D features (as yet), there are 
applications which do. Swift 3D by Electric Rain, for 
example. A package which combines a simplistic 
modelling and animation environment with super-fast 
vector rendering, Swift 3D has been used extensively 
throughout the Web. Even more impressive is Electric 
Rain's range of plug-ins, enabling the adept XS/, max 
or LightWave user to render out complex animations in 
SWF format. 

The benefits of such technology speak for 
themselves - those 3D experts not familar with the 
complexities of Flash can showcase designs without 
even opening up the application (unless interactivity is 
needed of course). Flash content also remains 
completely scaleable and re-editable, something of 
great importance in the world of Web design. Jim 
Foley, Senior Designer at Electric Rain, is the man 
responsible for creating the Swift 3D Extreme site at 
[w] www.swift3d.com/extreme. “I think that 3D vector 
work will always be a major part of 3D on the Web. 
Vector 3D on the Web is a powerful medium because 
of its ability to scale without losing quality. Vector 
animations are a fraction of the file size of other 3D 
technologies, which will be an issue for quite some 
time to come due to bandwidth restrictions and 
emerging wireless technologies.” 


Macromedia Director 8.5 enables you to import W3D models 
and add rigid body simulations and other dynamics through the 
application's native scripting language, Lingo. 


Bandwidth isn't the only advantage of using Flash 
together with a dedicated SWF 3D rendering engine 
for 3D work. “With Flash-based design there are no 
restrictions on the object's movement and placement, 
whereas most Cult 3D renderings are stationary 
objects which are only able to rotate on a specific pivot 
point. Also, with Flash-based design, the designer can 
further edit or make animations more complex within 
the Flash environment. For example, | can import an 
animation into Flash and manipulate that object frame 
by frame or add other animations - Shockwave doesn't 
allow you to make any changes to your animation.” 


The future 


The future of 3D on the Web lies very much in the 
hands of the designer. From individuals to small design 
houses to corporate giants, all will no doubt adopt the 
technology in the near future - just as they once 
adopted the now omnipresent Flash. 

Flash will of course remain a dominant force, but 
developers such as Electric Rain are bridging the gap 
between 2D and 3D, making 3D vector animation and 
interactive movies a viable option. The introduction of 
Shockwave 3D and to some extent Axel, has made 
true interactivity within 3D on the Web possible. 

Solutions such as Cult 3D and Viewpoint are 
admittedly the most widely-used technologies on the 
Net at the moment, but this looks set to change. 
Technologies such as Shockwave 3D and Axel are 
providing all categories of creative professional, not 
just those designing for e~commerce, with a relatively 
easy way of publishing 3D content to the Web. 
Whether the brower plug-in-orientated world of 3D on 
the Web will be accepted by those who really matter, 
the end users, is another question. 


The tutorial 


On the facing page, Mick Garner and Jason James of 
Freakish Kid ([w] www.freakishkid.com) guide you 
through the process of setting up a fully-interactive 
Axel scene, ready for the Arbuckle’s Ales Website. This 
tutorial addresses all the benefits of Axel 7.5, such as 
modelling, IK and texturing. You'll find a demo of 
AXELedge 1.5 on your cover CD. EES 


a 


Interactive 3D for the Web 


In this tutorial, we use AXELedge to create a 3D fridge and two 3D characters — one is 
pre-animated, the other is controlled by the user to undertake certain interactions 


Part 1: 3D fridge model 


The first section of this tutorial introduces you to the 
AXELedge interface. We'll begin by constructing a 3D fridge 


This tutorial was 
created using 
AXELedge v1.5, 
available in PC and 
Mac versions, price 
$950. For more 
details, visit 

[Ww] www.mindavenue. 
com. Expertise 
provided by Mick 
Garner and Jason 
James of Freakish Kid 
[e] mickgarner@ 
freakishkid.com 

[4]. 0115 9523510 


Tutorial files 


Before starting, copy the 
Tutorial/3D on the Web folder 


from the cover CD to your 


Re Before beginning, spend a few moments 
. familiarising yourself with the Axel Interface 
Look at the Project Manager, Sequencer, Interaction 


Go to the Model menu, select Model>Add 
Se Curve>Square. In the Front viewport, 
translate the square five units to the left. Enter 5.00, 
0.00, 0.00 in the position area of the Parameter 
Editor. Now go to Model>Create Surface> 


L— 


In the Parameter Editor, select Revolution 

Geometry and change the Axis to +¥. Now 
change the Subdivisions to four. With the object 
selected, enter 0.00, 45.00, 0.00 in the orientation 


Revolution from curve, and rename Revolution 
to Fridge. 


Editor and Parameter Editor. A few moments’ 
exploration will help with the following tutorial. 


area of the Parameter Editor. Select the Centre icon 


hard disk and align in Top view as shown above. 


Viewports 


If you want to zoom in ona 
specific object in one viewport, 
select the item and press F. 

To re-centre your model in 

all viewports, click off your 
model so that nothing is selected 
then hold Shift and press A. 

This zooms all viewports at the 


same time 


6 | Go to Object>Add Surface>Horizontal Plane, 

Go to Model>Add Surface>Vertical Plane. and scale this to 0.70, 1.00, 0.70 and rename it 
Select the plane and scale to 0.85, 2.55, 1.00 Midshelf. Select Translate and the Y-axis icon, then 

and name it Fridge Back. Select Translate and enter go to Edit>Instance. Translate to position 0.00, 

position 0.00, 0.00, -3.5. Select the model, and go 6.00, 0.00 and name Top shelf. Repeat and 

to Point Mode. Drag-select the four centre points Translate to position 0.00, -6.00, 0.00 and rename it 

and scale using X and Y-axis till it looks similar. Bottom shelf. 


ry Select the Object icon: in the Scale area of the 
"a? Parameter Editor, enter 1.00, 3.50, 3.00. In the 
Orientation area, enter 90.00, 0.00, 0.00 to rotate 
the model. 


G To create the door select the Fridge layer in the 
© World Editor, then go to Edit>Instance, and 
change the position to 0.00, 0.00, 0.00. Scale to 
1.00, 0.50, 3.00. Then position to 0.00, 0.40, 1.00 
and rename to Fridge Door. Select Fridge Back in the 
World Explorer, go to Edit> Instance and reposition 
to 0.00, 0.00, 4.10. Rename this Glass door. 


Open the Fridge door group and select Pin 
Constraint. In the Interaction Editor, select the 
tab Joint Angle. In the Animation Sequencer, press 
the Add Animation icon, then slide the Play head to 
the number 2 and press Add Key icon. Then slide 
the Play head to 4.4 and select Add Key icon. > 


Select Fridge door and Fridge in the Top view 

port. Go to Relate>Add Pin Joint, press D to 
view Pin Joint. In the Parameter Editor, enter 
Position 4.25, 0.00, 3.57. Select Constraint Axis Y. 
With the Joint Angle at 360, tick Enable Limits and 
set Min 225, Max 360. 
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Part 2: Animate-Import-Constraint 


In this section we'll add constraints, set keyframes for animation and 
import another Axel file 


File sizes 


File size is relative to download 
times, so we must keep it toa 
minimum. If you go to the 
Parameter Editor and select 
Plane Geometry, you can alter 
the subdivisions from default Sebegh aaa 
TOHxIOV to 1HxIV, saving 96 + nw seal 
points and helping to keep file 


size toa minimum. 


Download estimate 


menH eOO “AL BES “RVR SAS 
One of the most useful features 7 
in Axel is the Download estimate "H€SS CDH COO ay 
= 
feature. Go to the World hes ey 


Explorer>Download Estimates, 


select from a 28.8K modem to 


DSL/Cable modem and your In World Explorer, Multi-select all layers and casi 

download time and file sizes are a Select your final keyframe, and go to the turn Visibility off. Select Model>Add Curve> : 

shown. For maximum efficiency, Parameter Editor in the Animation Sequencer. Arc. In the Parameter Editor, select ArcGeometry1, Go to Model>Add curve>Circle. Scale to 0.2, 
if you select Show Details, you At Key 1, enter 360, at Key 2 enter 360, at Key 3 change the Angle to 180 and Subdivisions to five. 0.2, 0.2 then orientate to 90, O, 0. Translate to 
cen checkthaammuncer tate enter 237. In the Interaction Editor, select the white Go to Point Mode, select the three points on the the left end of the Arc. Select Circle and go to 
youlhavewtincned io your tab on the Pin Joint play animation parameter. Drag right and translate two units right on the X-Axis Arc1>Model>Create surface>Extrusion Along 
download rigaittes: to the OnKey, Press Up: sensor. Curve. Rename Handle. 


Gc Stl 00 ef 12000 


“SWOTONe 


G Go to File>Import Axel Project, locate the . 
Turn off Arc1 and Circle1. Rotate the Y-Axis 90 Bottle Profile from the CD, select and open 6 | Select the Top view and Edit>Instance as many 

and change Orientation to 90, 0,90. Make the _ Select the Bottle Profile and go to Model>Create bottles as you require, using Translate X-axis, 
Fridge visible, select Handle and Translate to 3.85, Surface>Revolution From Curve. Turn off the Profile Y-axis to position them and Z-axis to fill the upper 
-1.44, 0.00. and rename Revolution to Bottle. and lower shelves. 


"NEGPSON COO RR ESS = “S¥TVAEES 


——— — 8 | Select a bottle at the front of a shelf, then go to Select the Door Glass and use Visualise>Add 
@ Select File>Import Axel Project>Character1 Visualise>Add Image Texture>Locate Bottle Colour Material>Shaded. Choose Light Grey 
from the CD. In the Interaction Editor, drag With Label on the CD and open it. Go to the and click OK. In the Parameter Editor, select the 
from the white tab on each of the Play Animation Parameter Editor>Material>Texture Settings. Tick Material Glass for the door. Enter Transparency 45. 
Parameters to the OnKey, Pressup: Sensor. Repeat Horizontal Tiling, Texturing Mode: Multi. Position You can use this same technique to place colours or 
for all Play Animation Parameters. 0.23, 0.08. Orientation 90. Scale 1.15, 1.90. 


textures on the fridge if required. 
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3: Texture-Sensors—Hyperlink 


In this section, we'll add a texture, apply sensors to an 
interactive character and add a hyperlink to a sensor 


Hidden extras 


When you import Axel or other 
file types, Axel brings in any 
lights, cameras or textures as 
well as the model, so make sure 
your model has only what you 
want attached, so the file size 


isn't increased unnecessarily. 


Download times 


When using many objects that 
have the same texture, you can 
select them all and then select 
the material that you have 
attached to your first object, in 
this case the Bottle with Label 
Picture, then go to 
Visualisation>Link Material. 
This acts in a similar way to an 
instance in helping keep your 


download time down. 


The Link 


As our 3D fridge is going to link 
to a discounted beerin the 
database, we'll enter the 
Hyperlink as ‘catalogue.asp’, 
which is a relative link within the 
Arbuckle’s site. In Axel you can 
make relative links, or link to a 


URL on the Internet. 


We are now going to set up a second Webcam 

to create a cut shot at the end of the animated 
sequence. Select Visualise>Add Webcam rename to 
Webcam 2, select Interact>Add Reaction>Switch 
Webcam. In the Interaction Editor, select Time 
Sensor and link Switch Webcam. 


Go to Model>Add Surface>Vertical Plane, 

then scale and translate the plane so that the 
hand must pass through it before reaching the 
bottles. Select Character 2 Left Hand and Bottle 1, 
and go to Relate>Snap. Shift-select Left Hand and 
the Vertical Plane, then go to Interact>Add 
Sensor>Proximity. 


To preview your working 3D Interactive 

Model, select the Browse Mode icon. Press the 
up arrow key to start the animation. Once the 
animation is complete, use your left-mouse button 
to control his arm to select a beer. 


Go to the Animation Sequencer and insert the 

camera keyframe at frame five. Select 
Webcam2 and enter Position 1.97, 11.59, 23.18. 
Orientation 13.25, 11.47, 0.00. Interest Distance 
16.23. Near Plane 6.00, Far Plane Distance 44.21. 
Near Plane Height 5.47. Vertical FOV Angle 48.98. 


Go to Bottle 1 in the World Explorer, select the 

plus sign to open the submenu, select the Snap 
CNS and open its submenu, and select Active. Go to 
Interact>Add Reaction>Set Parameter. 


You can alter the size of the output screen by 

going to the World Explorer>Publish Settings, 
select 3D window, enter window height and width. 
For this tutorial we are using 540x400. 


Select File>Import Axel Project>Character 2 

from the CD. Translate Character 2 as shown in 
the screengrab above. Select a bottle at the front of 
one of the shelves that is within easy reach. We 
have used Top shelf left-hand side. Rename the 
bottle, Bottle 1. 


Go to the Interaction Editor: select the down 

arrow on the proximity sensor, then drag from 
the white tab on the Set Parameter Snap Active 
Constraint to the Hand and Glass Door enter 
Proximity Sensor. Go to the Bottle Snap Constraints, 
then turn active off. 


LI ical | 
In the World Explorer, select Bottle 1>Snap 
then go to Interact>Add Sensor>Parameter 
Change. Go to Interact>Add Reaction>Hyperlink, 
Enter destination address in Hyperlink address box 
In the Interaction Editor, link Hyperlink and 
Parameter change sensor. FEES 
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Contemporary 
sound design 


Audio is one of the most overlooked but potentially creative 
forms of communication on the Web... 


irroring the history of cinema, the moving 
image and animation side of the Internet 
equation has stealthily taken priority over 
audio. The whole medium of the Web is still 
in its infancy, so it can be forgiven this: after all, it took 
nearly 30 years for cinema to make the technological 
advances necessary to synchronise sound to image. 

Any medium which employs the use of moving 
images implies the use of sound - this is true for 
cinema, TV, the Internet down to handheld devices and 
all forms of user interface, even the code lock on the 
door to where you work makes gentle beeping noises 
(provided you get the code right). 

Websites and Web design represent a curious 
amalgam of art forms: a mix of user interface, narrative 
and information systems. It is perhaps the narrative or 
‘stylistic’ elements of Web design that most interest 
designers, and particularly sound designers — the 
process of conveying an emotion through visual and 
sonic stylistics. 

Many Web designers however, still implement sites 
with absolutely no consideration for sound, or worse, 
provide poorly thought-out and repetitive spot effects 
that do little more than degrade what hard work has 
been done within the visual and other aspects of the 
site design. These last minute decisions provide users 
with something that no designer wants, an excuse to 
leave the site. 

However, with recent and welcome advances within 
the delivery of Web audio, such as streaming MP3 and 
sound object ActionScript in design software such as 
Flash 5 and Director, Websites are taking their first 
tentative steps into sync sound. 

In e-commerce, it is now widely accepted that the 
most important factor in generating revenue from a 
site isn’t the number of hits a site gets, but the amount 
of time the user stays logged on. 


Well-designed and implemented audio now plays a 
vital role in this, and design agencies are at last 
beginning to take notice of the power of sound. 


The right pitch 


In terms of designing a site for sound, an initial phase 
should be built into the creative planning sessions. 
Film makers often make the mistake of assuming that 
sound and music are bolted on in the final phase of 
post production, missing many opportunities for sound 
design to bring something creative to the whole 
process. Indeed film sound designers such as Randy 
Thom and Walter Murch have written much to change 
this way of working. 

The same design mistakes that tend to be made in 
the medium of film can also be avoided within 
multi-media design. Being on board during an initial 
design meeting, or pitch can produce a variety of fresh 
and creative approaches to the project. Your 
competitors may not even have considered sound in 
their pitch. 

Certain information need not be represented 
visually at all, but can be conveyed by a carefully 
chosen voiceover, music or purely through sound 
atmosphere. A voiceover, for example, can 
communicate so much stylistically, as the TV 
advertising industry clearly understands. It can convey 
notions of grandeur, richness, ambiguity, and comedy 
at the same time as conveying information. 

The same is true of sound effects and music, and it 
only appears to be a recent idea that these sounds 
should in fact be designed to complement the overall 
effect of the Website. The decisions made for sound at 
the design stage will effect how the finished product is 
perceived, be it Website, computer game, TV 
commercial or film. > 
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The implementation of sound effects and music dovetailing 
together at [w] www.estudio.com, improves the overall quality 
of the entire site. 


Superbly implemented and high quality audio delivery at 
[w] www.donniedarko.com. 


User interface sound sets 


Recent work, Commercial and non- Tracks: 
commercial material all mixed in one big 
mess. 


» Blister: 


» Chop the hat: chopth : 
» Console: console.mp3 


eens 


© 24: 
» Bestaicke it bastnicks1.mp> 
ster.mp 


» Loungiiis |. 
> Outthere: outthersame2 
» Runner: runner.mp3 
® Sega: sega.mp3 
» Speak up: speakup.mp3 
» fda 

s 


[w] www.dformishiftfunc.net makes use of high-quality, intricate industrial soundscapes and highlights the potential for creativity 
within the medium. It's proof that Web designers should not be afraid of commissioning sound. 


It’s also necessary to understand the concept of 
‘immersion’ - this is similar to the concept of 
suspension of disbelief in a cinema audience. Put 
simply, this is anything that draws you deeper into 
the illusion, and sound is integral to this effect. 

The primary criterion for designing sound fora 
Website is to sync with what is happening in the 
visuals, in terms of style and animation. The 
soundtrack should form a discreet and organic part of 
the user interface. 

Consideration should also be given to the amount, 
type and style of information represented onscreen. A 
page consisting of textual information for example 
would not be effectively serviced by a hectic industrial 
soundscape — a subtle ambient atmosphere would 
work better, or even silence with the occasional effect 
for rollovers and page turns. 

Even though the technological capabilities for high 
quality Web audio have been around fora year or so 
now, virtually all audio-enabled sites still have a very 
impoverished approach to the use of sound and music. 
It would be nice to think that the serious multi-media 


Aconstantly recurring set of sounds can be found in all forms of interactive userinterface, particularly on the Internet. 


These sounds may be simply defined as the user interface sound set and commonly comprise clicks, button pushes, 


rollovers and ambient loops. Invariably these sound sets should be created from the same source sound material fora 


homogenous sound design throughout the site. While experienced sound designers are irreplaceable, it is an essential part 


of any interactive designer's skillset to be able to edit and manipulate basic user interface sound sets. The tools and 


techniques are widely available and relatively easy to perfect. 
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production companies are planning to establish 
dedicated inhouse sound departments, but by and 
large, sound still seems to be an afterthought. 

Most Web designers are primarily visually trained, 
with the attitude that any sound is better than nothing. 
Itis greatly to the detriment of Web designers and the 
companies who commission from them that in-house 
or even freelance sound designers and musicians 
(these creatives are usually one and the same person) 
aren't yet an active feature. 

One cause for optimism though, is that, as Web 
design agencies begin to conceptualise themselves as 
fully fledged multi-media production facilities, 
rivalling and perhaps surpassing the revenues of film, 
TV and advertising corporations, in-house freelance 
sound designers are now in demand. 


Innovation 


Another important and overlooked element to 
good sound design, particularly made accessible 
by Flash 5’s sound object ActionScript, is creativity 
within the functionality of audio on the Web. 

A sound designer needs to be able to think the 
whole site through as a macro-event or narrative, in 
the same way that we'd follow a narrative ina film. 

Moving forward through the site in this way requires 
an innovative approach. Subtle real-time cross fades 
and seamless loops, audio which fades or pans 
according to mouse position, are all basic ways of 
achieving further user-immersion. 

There are also a variety of memory-saving 
ways of implementation which are necessary to 
keep the loading times down. This is usually the 
prime reason many Web designers ignore sound, or 
simply use as little as possible. 


Randomly generated and interactive electronica at 
[w] www.singlecell.org/april. 


There is nothing wrong with using as keeping sound to 
the minimum, but this should primarily be an aesthetic 
issue rather than a technical one. 

Simple ways of re-using sounds within Flash so that 
they do not sound repetitive can be achieved by 
building fade envelopes into many variations of the 
same sound. 

Arollover for example could be randomly played 
four or five times, with a different fade envelope each 
time, thus cutting down on the need to have four files 
by just using one. 

The level of MP3 compression that is set when 
publishing from Flash is also a critical parameter to 
bear in mind in terms of audio quality. It can be 
the difference between sound and music sounding 
scratchy or sparkly, and this choice will change 
the way that the user perceives the overall quality of 
the site. 

The most obvious feature available to Flash 
designers is the choice of whether a sound is 
pre-loaded or streamed. The use of streaming, 
providing the user has a good connection, can greatly 
enhance the amount and quality of audio that is 
implemented ina site. 

You can stream in entire tracks, rather than having 
to rely ona preloaded loop. This technique has 
revolutionised the degree to which Websites can 
shake off their association with low memory, poor 
quality and repetitive loops. 


Examples 


Many of the sites which we will look at now make full 
use of this feature: 


There's a superb use of high quality, and intricate industrial 
soundscapes at [w] www.planetofthedrums.com. 


Interactive briefs 


[w] www.donniedarko.com 
This film trailer site is by hi-res.net, a company which 
excels in its creative use of audio. The high-quality 
audio delivery featured here is superbly implemented. 
The music uses clever loop points which disguise their 
repetitive nature, and, more importantly, they make 
use of sound object ActionScript which fades 
smoothly between the sections of music. 

[w] www.patient-b.com 
This folio site makes excellent use of streaming 
background music, and importantly gives users a 
choice of tracks and connection speeds. It also 
employs ambient effects to conjure up the dark and 
often comical London Underground atmosphere. 

[w] www.estudio.com 
This site has been around for some time now and still 
sounds great. Again the implementation of sound 
effects and music dovetailing together has great effect 
on the perceived quality of the entire site. 

[w] www.skysound.com 
The Website for George Lucas’ legendary post 
production sound ranch stands out with its perfect use 
of understated sound. The wind rustling through the 
grass, the subtle rollover effects and the gently 
building nocturnal wildlife effects all make this site 
into a sensual experience. 

[w] wwwsinglecelLorg/april 

[w] www.modifyme.com/ 

[w] www.thesquarerootof-1.com 
These sites represent a view of the future for 
creative sound design on the Web, particularly 
[w] thesquarerootof-1. The Shockwave 
implementation, the ability to actually change the 
playback speed of the sounds, reverse sounds in 
real-time, is second only to the sounds themselves. 

[w] www.planetofthedrums.com 

[w] www.dform'shiftfunc.net 
Both these sites make superb use of high-quality, 
intricate industrial soundscapes. They strongly > 


[w] www.thesquarerootof-1.com — the ability to change the playback speed of the sounds, and even reverse sounds in real-time, is 
second only to the choice of the sounds themselves. 
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[w] www.modifyme.com — electronic music randomly 
generated in real-time. 


Websites have, over the last year, demonstrated that 


The amount of sites now making full and 
sophisticated use of sound, music and dialogue in an 
interactive environment is such that it can no longer 
be neglected in favour of the visuals. The Web is 
clearly becoming something beyond the sum of its 
parts. Sound, music, film, vector animation, 
photography, user interface and information systems 
are merged like never before. 
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they are well and truly out of the dark ages of silence. 


You'll find the perfect use of understated sound at George Lucas’ post production sound ranch [w] www.skysound.com. 


highlight the potential for creativity within the medium 
and prove that Web designers should not be afraid of 
commissioning sound. 


Sound tools 


The tools available for sound design are many. 

From high-end, hardware-accelerated editors and 
multi-track mixers such as Pro tools or Soundscape, 
to purely software-based solutions such as Cool Edit, 
Vegas Video, Sound Forge or Acid. 

Many of these products can be found in any 
professional studio yet can also be employed on 
desktop or mobile computers. The nature of all 
multi-trackers or editors is essentially the same and 
the way they’re used is often down to personal 
preference. However, some have stronger features 
than others so you may use a mixture of various tools 
depending on the project. 

Trained and experienced sound designers are 
irreplaceable, but every Web designer should be able 
to effectively edit and manipulate sound for any 
Website, rather than just taking sounds straight froma 
CD or downloading arbitrary loops and spot effects 
from Websites. 

Within the main sonic needs of the online 
industry, there are a collection of sounds which 
constantly re-occur in any interactive brief: these may 
be defined as the ‘user interface sound sets’, 
consisting of rollovers, button pushes, clicks, 
whooshes and ambient atmospheres. 

In terms of music, again ambient atmosphere loops 
and simple music loops are often requested, although 
the latter has recently fallen from favour with the 
advent of broadband and cable Internet access 
bringing the ability to stream in full music tracks. The 
important factor in terms of rollovers, is to enable the 


sounds to fade in and out of silence. This increases 
their subtlety and decreases the possibility of sudden 
clicks as the sound starts or finishes. Button pushes 
and clicks are invariably tiny slices of sound cut out 
from a larger piece of source material. You can build 

| yourUI sound sets from any piece of sound or music, 
and it's often essential to creating a coherent sound 
design for the overall aesthetic of a site. 


The tutorial 


The following tutorial will guide you through the 
creation of several of these UI sound sets using Sonic 
Foundry’s Sound Forge 5.0 and the creation of a simple 
music loop using ACID pro 3.0. GEES 


E] Expertise provided by Rob Bridgett [e] rob_bridgett@hotmail.com 
[w] www.sound-design.org.uk 
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[w] www. patient-b.com has an excellent use of streaming 
background music, and, more importantly, gives users a choice 
of tracks and connection speeds. 


Creating a user interface sound 
set with Sound Forge 5.0 


In this tutorial, we create a button-click, button pushes, rollover, animation event, ambient 
loop and finally a basic music loop. We'll then import these into Macromedia Flash 5 


Part 1: Basic elements 


We'll create the main elements using the leadline.wav file on the CD — this will fit in 
tonally with the music loop which we'll produce later... 


Mono files 


Interms of saving memory within 
an interactive application, any 
spot effects such as button- 
clicks or whooshes should be 
saved out as mono files, thus 
halving the file size of a stereo 
file. This can be done using the 
Process>Channel converter in 
Sound Forge. If you are exporting 
from Flash however, there is an 
option to convert all sound files 
to mono within the Publish 
Settings page. This reduces all 
sounds to mono, including any 
music which you may be using. 
Remember also however, Flash 
enables you to pan sounds from 
left to right, so you can recreate 
stereo effects in this way. 


Open Sound Forge — there's a demo on the 

cover CD. Go to File>Open to open the file on 
the cover CD called leadline.wav. From this we'll 
create the main elements: a button-click, rollover, a 
page transition event and an ambient loop. These 
sounds will fit in with the music loop in part three. 


Select again a larger section of the file to be 
used, this time for an ambient transition 
between pages. Copy, Ctr/Command+C and paste 

to New, Ctrl/Command+E. 


Next, go to Process>Reverse the file, then click 

the >I button (Go to end) in order to place the 
cursor at the end of the file. Go to Process>Insert 
silence and select about five seconds. 


Highlight any section of the WAV, ensuring 
that it is a very small section. Each section you 
highlight can be auditioned by pressing the spacebar 
(Play). Once you have found a pleasing section for 
the button-click, copy it (Ctrl/Command-C) and 
paste it to a new file (Ctri/Command-E). Save as 
click.wav and close the file (Ctrl/Command-W). 


Select the entire first half of this new file. Then 

go to Process>Fade>Fade in. This fades the 
sound in from silence over a given amount of time. 
You can adapt these timings to best fit specific 
animations within your site’s scene changes. 


i 8 | Add a reverb effect to the file. Do this by 
selecting Effects>Reverb. We want the effect 
to die out around the length of the silence we have 
selected. Try the settings Dry out, 0 db, Reverb out, 
12 db, Early out, 12 db, Decay time, 3.3, Pre-delay, 
70 for a nice long decay. Click Apply. 


This time highlight a larger section of the 

WAV. This will be used for a beep or button 
push, so it needs to be slightly longer and different. 
Once selected, copy, Ctri/Command-C and 
Ctrl/Command-E to paste to New, then simply save 
this out as the file button. WAV. Close the file, 
Ctrl/Command-W. 


Select the entire last half of the WAV, this time 
selecting Process>Fade>Out in order to fade 
the sound out to silence. 


Select the file as shown and trim the sound in 

order to get rid of any silence at the end, using 
Ctrl/Command+T. Reverse the file again using 
Process>Reverse. Then save the file as event.wav. 
This file should be made to an appropriate length to 
cover the scene change animation within your Flash 
movie and can be tailored accordingly. > 
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Part 2: Ambient atmos loop 


Using Sound Forge 5.0, we'll create a large reverb which slowly decays into silence... 


Adding silence to a 
file before applying 
an effect 


While adding silence isn't 
necessary in this situation, itis 
good to get into the habit of 
adding silence to files before 
processing any effect. While 
most of Sonic Foundry's own 
reverb effects add the silence for 
you, thereby saving the task of 
adding silence and then 
trimming the file, some third 
party plug-ins don't operate in 
this way. Instead, they just 
process the file without adding 
any extra space for the effect to 
decay properly. 


Web Design 


Click cursor position to go to the end of the file 
(the >| button) and go to Process>Add silence. 
This time for approximately 10 seconds. 


& Again, we'll start by opening the file 
Leadline.wav on the cover CD. 


4 | Select the first part of this file, the section that 
isn't the tailing off reverb, and delete this by 
pressing the Delete button. 


You now need to increase the volume of this 
remaining sound. Select Process>Normalise. 
This brings the loudest peak of the sound to 0 db. 


We will now mix the contents of the 

clipboard with the new reversed file. Go to 
Ctrl/Command+M to mix the contents of the 
clipboard with the file at the cursor position. From 
here you can choose the destination and source 
volumes and preview them. Ideally both source and 
destination volumes should be 0 db which should be 
the default parameters. Click OK. 


Click I< in order to position the cursor at the 
beginning of the file. 


Select Effects>Reverb and try the following 

settings. Dry out, Odb, Reverb out, 11.7 db, 
Early out, 12 db, Decay time, 5, Pre-delay, off. This 
should provide a large reverb which slowly decays 
within the silence that you have added. 


Go to Ctrl/Command-T to trim the section of 
sound we want to work with. Select all, 
Ctrl/Command+A and Copy the file to the 
clipboard. Go to Ctrl/Command+C, then reverse the 
file, Process>Reverse. 


9 | This file should now loop, press the Loop Play 
button. However, the chances are that the file 
will glitch at the loop point. In order to remedy this, 
zoom in as far as you can to the WAV at the 
beginning and ends of the file by using your I< and 
>| buttons. Select a tiny section at the start of the file 
and go to Process Fade In, then repeat for the very 
end of the file using Process>Fade out. The file 
should now loop without the glitch. Save as 
ambientloop.wav. 


Part 3: Music loops 


The third stage is to create a basic music loop with ACID pro 3.0 


AudioMulch 


Both the music loops provided, 
leadline.wav and bassline.wav, 
were created with the free beta 
software Audiomulch, which is 
available from [w] www. 
audiomulch.com. The program 
enables you to create any 
number of sound ins and outs, 
and also to filter and effect them 
allinreal-time.It'savery 
experimental piece of software 
and well worth a look. 


Run the program ACID pro (on the cover CD). 

In the Explorer section, locate the demo files 
on the CD: bassline, leadline, drumloop and the file 
that you will have previously created, ambientloop 
(provided). Double-click all these in the Explorer and 
each file will open on a separate audio track. 
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Draw in the section leadline for the last four 
bars of the section only. 


Add another ambient section right at the end 
of the loop area at the end of bar 8. Insert the 
same volume envelopes for this section. 


Start by drawing in the drum loop for a length 


of eight bars. 


Draw in our file ambient loop.way so that it 
immediately preceeds the leadline section. 


[8 | Drag the loop playback area line at the top of 
the screen to cover the whole eight bar section 
we are working with. Right-click this bar and select 
Enable Loop Playback. 
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Draw in the section bassline underneath the 
drum loop, again for a length of eight bars. 


Right-click the Ambience channel, away 

from the actual drawn in WAV and go to 
Insert>Volume envelope. Then add points along this 
volume envelope by double-clicking anywhere 
along it. Draw in the volume envelope as illustrated 
to fade in the ambience and then suddenly cut out 
as the leadline section starts. 
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9] Click File>Render as ‘musicloop.wav' (the file 
on the cover CD is musicloop.mp3) ensuring 
that the ‘render loop section only’ checkbox is 
ticked (provided). All these sounds are now ready to 
be implemented in any Flash project. Import them 
into your library and then simply drag them into 
keyframes in order to execute them. EEE 
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The final build 


Careful planning means that putting together the Arbuckle’s site shouldn't be too difficult. We 
use Dreamweaver UltraDev 4 to create our final build before publication 


Part 1: Populating pages 


The first order of business is to insert all those Flash, video and 3D files into your site 


Macromedia Exchange for Dreamweaver UltraDev 


Insert Flash 


Use the Insert Flash object to add 
the content to the Flash Game 
and Phone Logo pages. You'll find 


If you've been following all the tutorials from 
the beginning you should have a partially 
completed Arbuckles site already on your hard 
drive. Move all the Shockwave Flash and other 
media content, the Aleman game, the mobile logo 


application, QuickTime video, Flash ad banner, 
Flash splash screen and 3D fridge files to the folder 
‘media’ within your Arbuckles site. 


the appropriate Shockwave Flash 
files (aleman.swf and 
arbuckles_selectorswf in the 
media folder of your site). We've 
created the splash page for you. 


Assets 


The Assets window can be used 
to quickly locate Flash and video 
content. Dreamweaverscans 
your site for content it 
recognises, then automatically 
orders it for you. To insert content 
into a page, just drag and drop 
from the Assets panel. 


4 | Search the Exchange using the keyword 
‘QuickTime’. Download the QuickTime Object 
to a folder on your hard drive. When the download 
is complete, return to the Extension Manager and 
select File>Install Extension. Browse for the 
Quicktime Object you downloaded. 


You will also need to copy the contents of the 
folder arbuckles_partial/images to the images 


folder of your site. Alternatively, copy the entire 
arbuckles_partial folder to your hard drive, open 


Dreamweaver and define a new site pointing to this 


folder as root. Name the site Arbuckle’s Ales. 


Open the file promo.html from your site. 

This is an empty template. Click within the 
empty ‘content' cell, then on the new QuickTime 
Object icon in the Object panel. Browse for the 
source file arbuckles_webstream_4.mov in the 
media folder of your site. 


Part 2: Tweaking templates 


The Arbuckle’s site has been designed so that it's easy to update, using Templates and Library items... 


Library links 


When adding new links toa 
Library item direct, remember 
that the item is stored below 

the root folder. That means that if 
the link is relative, you may have 
to refer to a folder above the 
current one by preceding the link 
with ‘./” 


a Before publishing the site, we need to insert ad 
banners into our pages. As there are around 30 
of them this would be a laborious process if we 
hadn't used templates. In Dreamweaver, open the 
file main.dwt from the templates folder of the site 
you're working on. 


Web Design 


Select the banner image in the template and 

delete it. Go to the Objects panel and click on 
the Insert Flash icon. Browse to the media folder 
and insert banner1.swf. 


Selec renews 
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Go to the Commands menu and choose 

Manage Extensions. From the File menu, select 
Go to Macromedia Exchange. Your browser will 
launch and take you to the Macromedia Exchange. 
If you're not already a registered user, you'll have to 
sign-up before proceeding. 


Set the dimensions of the movie to 320x240. 

Click the QuickTime 4 tab and under Movie 
Name, type Arbuckle's Promo. Click OK then, with 
the greyed-out movie selected, go to Text>Align 
and choose Centre. Save the file. 


Next, click on the Insert Image icon, and add 
poe. gif directly after the Shockwave Flash 
powered banner. With the image still selected, add 
the link [w] www.easynet.co.uk/ in the Properties 
panel. Select _blank from the Target dropdown. 


Database 
connection 


Set up your database connection 
according to the instructions in 
the database article on page 39 
before testing your site. 


Axel files and 
HTML pages 


To add 3D content to an existing 
Web page using an HTML editor, 
publish the project to generate a 
host Web page (.htm) and an 
AXELedge stream file (.axs). 
Place the AXELedge stream file 
in the same directory as your 
page. Paste the AXELedge object 
code from the host Web page 
into your Web page. Adjust the 
window or windowless properties 
in the AXELedge object code. 


WheginEditad 


Save the template. When the Update Template 

Files’ dialog appears, choose Update. The files 
that use the main.dwt template are updated to 
reflect the changes to the source file. 


Part 3: Cleaning up 


Before finally publishing the site to your local server or remote Web space, we make a few final checks 


External links 


You can quickly check that the 
external links in your site are OK 
by going to the Assets panel and 
clicking in the URLs icon. If 
anything needs altering, go to 
Edit>Find and Replace. 


The site's live 


Thanks to Easynet, our site is live 
on the Web at [w] www. 
arbucklesales.com. Log on and 
see it all at work. Alternatively, 
you can run it from our CD or 
from your hard disk. The 
database-enhanced sections of 
this site won't work directly from 
the CD. Copy the site to your hard 
drive, then follow the instructions 
in the database tutorial in the 
magazine to set up the database 
connection. In order to view the 
ASP files in this site, it should be 
published to a local or remote 
Web server that supports active 
server pages first. 


And an ezine? 


Now that yoursite has been built 
it’s time to start promoting it. Find 
out how to create an HTML ezine 
in the Web Skills tutorial in issue 
67 of Computer Arts. It's on sale 
from 31 January. See [w] 
www.computerarts.co.uk for 
more details. 
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content, tweaked the templates so that the site 
is looking as it should: you want to check that 
everything is working before you publish the site. 


4 | Go to Site>Reports. Choose Entire Local Site 
and tick all the boxes under HTML Reports 
except Missing Alt Text. Click OK to generate the 
Report. When the process has finished, switch to 
the Results window. 
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To check that your files have updated properly, 

open mobile.html — a page associated with 
main.dwt in your Web browser. The new banners 
should be in place. Click on the Easynet logo to 
make sure your link works. 


In the Site window, go to Site>Check Links 
Sitewide. If you've built the site as instructed 
you shouldn't come up with any broken links. 
However, if you do, identify which pages have 
errors and fix them. If you haven't set up a database 
connection, this will be reported as a broken link. 


‘Note: Empy tag: <FONT> 
Note: Empty tag <FONT> 


Note: Empty tag: <FONT> 
Note: Empty tag: <FONT> 


When a file is flagged as containing errors in 

the Results window, select the error, then 
choose Open File. With the file open, go to 
Commands>Clean Up HTML and tick the 
appropriate boxes. Alternatively, go to Code View 
and fix the problem manually. 


6 | Libraries can be updated in a similar way. Go to 
Window>Library to open the Library panel. 
Double-click on an item in the panel and make any 
changes. To apply the changes, save the item and 
choose Update from the dialog that appears. 


You should also note that plug-in files may be 
reported as orphaned even though they're 
fine. You can fix a link across the entire site by going 
to Site>Change Link Sitewide. In the top text box 
enter the link you wish to change, in the bottom 

text box add the new link. 


Find helpful hints on how 
to enjoy your Arbuckle’s 
Imported Ales with our 
brand new safety video. 
You'll never have to 


proceeding. 


Arbuckles import the best 


G Be aware that Dreamweaver treats Library and 
Template files as HTML files when generating 
reports. Sometimes you may get a lot of errors 
reported that may be fixed by making an alteration 
to your template rather than every individual file 
on your site. EEE 
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The latest deals 
from all the major 
companies for 
poor students... 


It's a fact that creative software is 


expensive. While Web design 


software is a fraction of the price of 


high-end 3D and compositing 


software, buying commercial 


versions can still leave a large dent 


ina student's wallet. 


Luckily, the manufacturers of 
the major Web design software are 


giving educational discounts to 


individuals. This wasn't always the 


case, for example, up until last 


September, Adobe would only offer 


these to institutions. 


Students who can prove they 


are part of an educational 


institution can now get up to 75 per 


cent off Adobe products. Photoshop 


will cost only £260 (as opposed to 


£464) to those at school or college 


whereas GoLive 5 has educational 


pricing of just £74. Go to [w] www. 


adobe.co.uk/education for more. 


Macromedia offer discounts on 


its superb range of Web tools. You 
can pick up the Macromedia Web 


Design Studio, including Flash 5, 


Dreamweaver 4, Fireworks 4and 
FreeHand 10 for around £210 - a 


massive saving. See [w] www. 


macromedia.com/uk/solutions/ed 


ucator/. Of course, when you 


graduate, you'll have to buy 


commercial versions. 


Buyer's Guide 


www.computerarts.co.uk/revlews 


Product Platform Price Company URL Verdict 
Dreamweaver 4 PC/Mac £269 Macromedia www.macromedia.com He He He Hee 


Dreamweaver is without doubt one of the best WYSIWYG Web authoring applications available, if not the best. An easy to navigate interface, 
coupled with a strong feature set with excellent Flash, Director and Fireworks integration make it truly indispensable to the creative Webmaster. 


UltraDev 4 PC/Mac £469 Macromedia www.macromedia.com De Sie ie 3} 


Think of Drumbeat's successor, UltraDev, as Dreamweaver 4 on steroids. All the features of Macromedia's WYSIWYG authoring app are 
combined with many behaviours, wizards and objects enabling you to create database-powered Web applications. 


GoLive 5 PC/Mac £234 Adobe www.adobe.com baad ead aad aad 


GoLive Cyberstudio brought drag-and-drop Web authoring to the desktop long before Dreamweaver. Adobe then snapped up the product and 
renamed it GoLive. Excellent site management tools, table-editing features and integration with Adobe's range of graphics products. 


Freeway 3.0 Mac £199 _—_Softpress www.softpress.com De SE ee 


Freeway takes a somewhat different approach to Web design to Dreamweaver and GoLive. The less Web-sawvy will adore this application, 
thanks mainly to its XPress-style interface. JavaScript, CSS positioning and actions (that rival those in Dreamweaver and GoLive) are all here. 


Caligari iSpace PC. $99 Caligari www.caligari.com 
An oddball application from the makers of the 3D package trueSpace, iSpace enables you to generate 2D Web pages in a 3D environment. A 
nice attempt at something a bit different but there's no scope for creating interactive 3D content and the workflow is rather poor. 


NetObjects Fusion 5.0 PG £234 ~~ NetObjects www.netobjects.com Lsududes 


A business-orientated Web design package, Fusion puts the emphasis on site construction rather than the intricacies of design. Supplying you 
with drag-and-drop components, a site complete with embedded forms, DHTML, database connections and online shopping applications. 


PhotoWebber 2.0 PC/Mac £249 MediaLab www.medialab.com 


PhotoWebber is a graphics production tool that enables you to create instant Web pages from Photoshop files. Rather than combining various 
elements as an HTML-based page, the app intelligently transfers block and background colours into body properties and table backgrounds. 


HoTMetal Pro 6 PC £88 SoftQuad www.softquad.com EEBEBERE 


Starting life as an HTML-crunching text editor, HoTMetal. Pro attracted a loyal following of coding fans. The latest release has evolved into a 
full-on drag-and-drop authoring tool with a sophisticated range of features including one of the best HTML editing modes of any package. 


BeyondPress 4 PC/Mac £235 _ Extensis www.extensis.com 


BeyondPress from Extensis plugs into QuarkXPress 4 - aiming to convert XPress pages into HTML. For designers not wanting to venture out of 
their trusty copy of XPress, BeyondPress could be a good way of creating Web pages. For others, it's a bit difficult to see the appeal. 


HomeSite 4.5.2 PC £88 Dabs Direct www.allaire.com eH ee 


Although HomeSite is primarily a code-based editor, it does feature a drag-and-drop window for laying out visual elements. The real power 
though comes in the form of manual coding tools. These include a Tag Inspector and colour coding for a variety of script types. 


Flash 5 PC/Mac £259 — Macromedia www.macromedia.com ERESESEDE 
Flash comes of age with a major interface and feature redesign. A completely redesigned ActionScript, more workflow-facilitating tools and a 


full-on Bézier toolset make the application a tool that every Web designer must have. 
LiveMotion PC/Mac £222 Adobe www.adobe.com EEE 


Adobe's answer to Macromedia's all-encompassing Flash, doesn't quite make the grade. Although the app features a set of excellent drawing 
tools, the standard Adobe interface and an After Effects-style timeline, it has no scripting capabilities — best used for simple SWF splash pages. 


Director 8.5 PC/Mac £1115 Macromedia § www.macromedia.com — De eee) 


For a .5 release, Director brings a good amount of new features, most notably in the form of Shockwave 3D. A plethora of new 3D-orientated 
behaviours along with an easily navigable interface make creating interactive 3D for the Web a much easier process. 
www.visviva.com bey 


Visviva Authoring Studio 1.1 PC £599 ; 
Visviva Authoring Studio (VAS) is a solution for creating HTML, 3D modelling and animation, vector graphics and bitmaps. It sounds like a great 
idea, but unfortunately it fails on all accounts. Extremely tricky to use and the HTML it produces is shareware-esque. One to be avoided. 


Visviva 


Product Platform Price Company URL Issue Verdict 


Toon Boom Studio PC/Mac $374 Toon Boom www.toonboom.com Ye EE] 


The cheaper little brother of high-end animation app, USAnimation, Toon Boom Studio is dedicated to producing online cartoons. The pick of 
the features are the 3D scene planner and lip-sync tools, the latter analysing a vocal track and producing a sequence of mouth shapes to match. 


Axel 1 PC $1009 MindAvenue www.mindavenue.com EESEBEBE 
Axel 1 is an application dedicated to producing interactive 3D content for the Web. A host of intuitive tools such as boning and skinning, 
combined with a plethora of interactivity options make it one of the most comprehensive, intelligent and easy-to-use Web 3D solutions around. 


Swift 3D 2 PC/Mac $159 — Electric Rain www.swift3d.com We He HE 


Designed specifically for the 3D artist wanting to render out 3D models as SWF or other vector file formats, Swift 3D has a wide range of 
modelling, animation and rendering features. Tricky to learn for those new to 3D, but bridges the gap between 3D and Flash nevertheless. 


Adobe Atmosphere PC £N/A Adobe www.adobe.com 


This offering from Adobe is somewhat different from its other creative applications, Atmosphere enables you to create virtual 3D worlds and chat 
rooms for the Web. Still in beta stage (for what seems like an age) it’s downloadable for free from adobe.com. If you're interested, snap it up. 


Opus Pro PC £249 Digital Workshop www.digitalworkshop.co.uk E3E3ESE 


Illuminatus Opus Professional makes for a good alternative to Macromedia Director. Some nifty multimedia-creation tools with built-in scripting, 
a huge range of supported image and video formats and some excellent database functionality make for a competent multimedia application. 


|-PEGS PC £2364 + MediaPEGS www.mediapegs.com BEBE 


|-PEGS approaches the task of Web animation from the point of view ofa traditional 2D animator. Designed for the big studio (with a price tag to 
match) /-PEGS is a module-based system that enables you to scan, paint, and output to SWF. A robust animation environment. 


Photoshop 6 PC/Mac £469 Adobe www.adobe.com CEBEVESE 


The de facto-standard in image-editing and manipulation boasts a feature set that is currently unrivalled by any similar package. Unlimited layers, 
vector shapes and a new interface are highlights of this release. 


ImageReady 3 PC/Mac Bundled with Photoshop www.adobe.com 

Photoshop's dedicated Web sibling, ImageReady, holds a plethora of features and options for preparing Web graphics and GIF animations. New 
to version 3 (among other things) are dynamic layer-based slices and rollover styles. The perfect Web companion to Photoshop. 

Fireworks 4 PC/Mac £269 Macromedia www.macromedia.com Di Sie ie SE 


Fireworks 4 is the perfect companion to Macromedia Dreamweaver and Flash, enabling you to prepare bitmaps, vectors and animations and 
crunch them down to size. Version 4 brings a pop-up menu creator which enables you to quickly produce dropdown menus. Well worth a look. 


Xara X PC £120 = Xara www.xara.com EEDED 


Xara X is an all-in-one graphics package with a feature set that brings it into line with Fireworks and the like. Automated JavaScript rollover 
button creation, complete vector drawing, bitmap export optimisation tools and the ability to export to SWF make Xara a great budget purchase. 


Illustrator 10 PC/Mac £399 Adobe www.adobe.com BEBEBESE 


It's still not a multi-page program, but this 2D vector drawing software upgrade offers innovative symbol tools, powerful envelope features and 
good Web image-slicing. Still the best for reliable PostScript-clean EPS output and for versatile transparency and feathering. 


FreeHand 10 PC/Mac £328 Macromedia www.macromedia.com Be 
One of the two industry standard vector apps (the other being /I/ustrator) FreeHand 10 has a variety of excellent print and Web-based tools. In 
addition to new tools and enhanced Flash export, the interface now echoes those of Macromedia's other Web tools. 

Expression 2 PC/Mac $149 Creature House www.creaturehouse.com BERBE 


Enabling you to paint vector-based editable strokes, Expression was a revolution when released in 1996. The package has recently been reborn, 
with version 2 bringing a new rendering engine, Flash export and rehashed UI. 


CorelDRAW 10 PC/Mac £420 Corel www.corel.com Ye He Se 


Comprising DRAW (vector graphics), Photo—Paint (bitmap editing) and RAVE (SWF animation), CorelDRAW 10 is certainly a good-value suite of 
graphics apps. The main app - DRAW — has possibly the best texture fill effects you'll find in any graphics package. 


After Effects 5.5 PC/Mac £617 Adobe www.adobe.com BB 


Competing against Commotion and combustion, 5.5 has excellent 2D and 3D compositing, a growing toolset for cross-media productions and 
90 good effects filters. Improved SWF, RealMedia, QuickTime and Windows Media export make AE a powerful tool for Web work. 


Cleaner 5 PC/Mac £492 Media 100 www.media100.com We He Hee 
Cleaner does what it says on the tin — it imports virtually any kind of movie file into the app (including MOV, AVI and Windows Media) and 
crunches it down to size, for streaming on the Web. Essential for anyone serious about streaming. 

Premiere 6 PC/Mac £539 Adobe www.adobe.com EIEBEBEDE 
The industry's favourite video-editing application now has a variety of options for exporting footage to the Web. If you need an all-in-one DV 
app that can capture, edit and prepare footage for the Web, Premiere is it. 

Hypnotizereditor1.0 = PC $360 —__Hypnotizer www.hynotizer.net BEBE 


The idea of this app is simple: take a piece of Web video, be it in QuickTime, RealMedia, or Windows Media format, and use the Hypnotizer 
Editor to overlay interactive graphics onto it. On the whole it works well and is only marred by the pay-per-view model of distributing content. 


Adobe 

Sales: [t] 020 8606 4000 
Support: [t] 0131 451 6888 
Caligari 

Sales: [t] 01752 211 313 

Support: [w] www.caligari.com/ 
help/support/techsupport-html 


Extensis 
Sales: [t] (CU) 020 8200 8282 
Support: [e] support@extensis.com 


Macromedia 
Sales: [t] (CU) 020 8200 8282 
Support: [e] eurosupport@ 


macromedia.com 


Media 100 
Sales: [t] +1 800 7731770 
Support: [w] www.medial00.com/ 


customer/advocate/advocate.html 


Media Lab 
Sales: [w] www.medialab.com 
Support: [w] www.medialab.com/ 


support 


Xara 
Sales: [t] 01442 350 000 
Support: [w] www.xara.com/support/ 


The tools you need 
and what you need 
them for... 


Streaming Video 


Databases 


* Web /HTML 
Animation 


Dreamweaver 4 
UltraDev 

GoLive 5 
Photoshop 6 
Fireworks 4 
Illustrator 10 
FreeHand 10 
Flash 5 
LiveMotion 
Director 8.5 
ToonBoom Studio 
After Effects 5.5 
Cleaner 5 


Premiere 6 
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ON SALE JANUARY 31 


Computer Arts Flash Special — 
COSB0022 

Tutorials on a host of Flashrelated 
topics, including: the designer's 
guide to XML; creating and editing 
sound clips, using a Flash 5 
scripting engine; rotational 
navigation; and how to set up a 
Generator server and add dynamic 
Flash content. Make your Flash life 
easier with a complete ActionScript 
reference and expert tips from 
Macromedia. We also profile rom 
and son, Broad Snout and Pesky. 
CD Demos of Flash 5, Director 8.5, 
Generator, FreeHand 10, 

Flash Typer, and 70+ source files. 


Issue 61 — Code CA061 

Pixel art: all angles explored 

CD Expression 2 LE, IconBuilder 
Pro 3, Premiere 6 demo. 


Computer Arts 
Special — COSB0023 
We cover a whole range of 
Photoshop techniques from 
creating chrome and metal textures 
to blending using layer modes, 
cleaning scans, and optimising 
graphics for the Web. We also take 
a look at accurate skin matching in 
composite images and Magictorch 
explains how to give abstract 3D an 
extra twist. Plus, reviews of the 
best plug-ins, expert ImageReady 
tips, profiles and more. 

CD Demos of Photoshop 6, 
Cinema 4D XL 7, 70 plug-ins — 36 
for Mac, 34 for PC. 


Issue 62 — Code CA062 
Shockwave 3D: design a Web game 
CD Poser Pro Pack, Bryce 5 demo, 
Swish 1.5 — full, Director 8.5 demo. 


Special — COSB0025 

Master the world’s best graphics 
program with 10 creative skills 
tutorials, including designing your 
own custom shapes, brushes and 
gradients, altering colour treatment 
using the Adjustment Layers, 
transforming daytime-photographed 
elements into a night scene, and 
medical illustration using the 
Airbrush tool. Plus tips on how to 
configure PS's Preferences, our PS 
7 wishlist, and DreamSuite compo. 
CD Eye Candy 3.1 full plug-in, 

12 royalty-free photos, hundreds of 
free Photoshop extras. 


Issue 63 — Code CA063 

100 tips on creating better images 
CD Free Eye Candy 3.1 plug-in, 
SoftimagelXS/ demo. 


Computer Arts Design for Print 
Special - COSB0026 

A new and modern look at the 
whole area of designing for print — 
we take a look at QuarkXPress 5 
and InDesign 2, and key DTP apps 
and topics, including PDF: a guide 
to Acrobat, perfect cut-outs, the 
golden rules of graphic design, and 
preflighting. For quick reference, 
we've compiled 102 DTP tips, and 
reviewed 10 plug-ins and 
XTensions. Plus profiles of Glamour 
magazine and Beaver Design. 

CD 1000 free sample images from 
Hemera, 150 free fonts, XPress 4 
and InDesign 1.52 demos. 


Issue 64 — Code CA064 
FreeHand 8 free, photorealism 
CD FreeHand 8, LightWave 7 dual 
demo, Dreamsuite demo. 


of the world 


computes 


Aas ail 


, 


“Special ie 


Computer Arts Special effects — 
COSB0027 

Use your video, 3D and 
compositing skills to create movie- 
style SFX. Tutorials include: creating 
dragon fire in 3ds max; ultra-real 
planetary explosions; Hobbits! The 
‘little people’ effect; slo-mo, old film 
effects, mattes, fur and more. We 
take a look at the hot new desktop 
tools taking the donkey work out of 
vfx, and the story behind Walking 
with Beasts. Plus, a guide to SFX 
software, profiles and regulars. 

CD Free copy of AlamDV1 worth 
£45, demos of LightWave 7, 
Cinema 4D XL7 and AE 5. 


Issue 65 — Code CA065 
Film-making for the Web 

CD Deep Paint 3D 1.61 (PC), 
Swift 3D 2(PC), Flash 5 (dual). 


+44 (0) 1458 271108 
take out a subscription — see page 75 
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Illustration 


Creativity, technology and the illustration marketplace 


* Over 100 tips for digital illustrators 
« Approaching your brief — two top artists tackle the same commission, one 
with scanned elements and the other with purely digital creations 
* Tutorials for Illustrator, FreeHand and CorelDRAW 
+ Personal work — top digital artists reveal their inspirations 
+ Profiles of lan Whadcock, Pam Hobbs, Gary Kempston and Dan Oehl 
+ Inside advice and information for up-and-coming artists www.computerarts.co.uk 
+ Cover by The Designers Republic 
Reserve your copy today 


On sale Thursday 14 Febuary touring eare 


Computer Arts to your door 
every month. 


Updates at [w] www.computerarts.co.uk 


arts 


ELSA GLoria III ECOMO 341 LCD ELSA Synergy 2000 


Internet Communications | Networking | Graphics Boards | Monitors ELSH 


www.elsa.co.uk 
0870 990 4242 


MORE GREAT PRINTING 
SOLUTIONS FROM XANTE: 


XANTE ACCEL-A-WRITER 3N/3NG 


Office and Network Printing 
Resolutions up to 1200 dpi 
Output up to 330mm x 469mm 
Graphics Kit: Densitometer Support, 
Halftone Calibration and X-ACT 


RRC ATOM):, ..2-.-00- £1 399” 
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XANTE FILMMAKER 


STAR RATING 


KEK 


Computer to Film Technology 
Resolutions up to 2400 dpi 
Output up to 330mm x 900mm 
Prints clear and matt film 
Advanced options for film users 


Petom.:;.. £3299" 
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XANTE COLOURLASER 
XANTE COLOURLASER 21 


XANTE's new ColourLaser 21 combines the quality and reliability of XANTE's colour expertise 
with ultra high speed printing - resulting in the perfect colour workhorse solution. Finally — great 
colour at a great speed! Just take’ a’look at what you'll receive with the XANTE ColourLaser 21: 


Photo Quality Colour Output 


High volume, high performance XANTE's colour management Resolutions up to 1200 dpi 
Oversized printing up to305mm x 900mm Low cost-per-page Output up to 330mm x 482mm 
Optional duplexing capabilities 21 colour pages per minute XANTES colour management software 
Genuine 1200 x 1200dpi 26 mono pages per minute = Fast RISC processing 

Genuine Adobe PostScript Level 3 RIP And much more! Pantone Calibrated 


REP TOM... 5065 £5999” RRP from.......-+.-+ £2899" 


Enter online for your chance to win a FREE ColourLaser 21!! - www.xante.com 


ed B outed by: Info-Tec Distribution Ltd, Unit 11B, Dawkins Road Industrial Estate, hamworth) Poole, Dorset BH15 4JP 
ed Tel: 0870 742 0802 * Fax 0870 742 0803 « salesteam@info-tec.bi. 


